關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞,參數(shù)獲取
vue中的路由講三點(diǎn)
第一點(diǎn)：
- 指令級(jí)別的路由<router-link>和程序級(jí)別的路由router.push();
第二點(diǎn)：
- 通過(guò)query和params傳遞參數(shù)和path和name之間的關(guān)系。
第三點(diǎn)：
- $router和$route地區(qū)別
聲明：由于路由和傳參和參數(shù)獲取密切結(jié)合，所以將他們混合在一起講解，最后會(huì)附加一個(gè)實(shí)例。
html中通過(guò)<router-link>指令完成路由跳轉(zhuǎn)
第一種情況就是以path形式
<router-link v-bind:to="/foo">登幽州臺(tái)歌</router-link>
第二種情況就是以路由對(duì)象Object的形式
<router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link>
注意這里的name指的是具名路由，在路由列表中的配置如下
{ name: 'wuhan', path: '/wuhan', component: WuHan }而WuHan則是這個(gè)路由要抵達(dá)的模板或者說(shuō)頁(yè)面，定義如下
const WuHan = {template: '<div>武昌， 漢口， 漢陽(yáng) --- {undefined{$route.query.city}}</div>'}注意由于在<router-link>中是通過(guò)query的形式區(qū)傳遞參數(shù)，所有在目的地頁(yè)面中也只能采用query的形式獲取參數(shù)。
也可以不采用query的方法，而采用params的形式傳遞參數(shù)
<router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>那么在在路由列表中的path中必須帶上params傳遞過(guò)來(lái)的參數(shù)，否則在目的頁(yè)面中無(wú)法獲取參數(shù)
{ name: 'wuhan', path: '/wuhan/:city',component: WuHan }在目的頁(yè)面中以params的形式獲取參數(shù)對(duì)應(yīng)的值
const WuHan = {template: '<div>武昌， 漢口， 漢陽(yáng) --- {undefined{$route.params.city}}</div>'}注意事項(xiàng)：不可以在<router-link>的路由對(duì)象中同時(shí)出現(xiàn)path和params，此時(shí)params作廢。目的頁(yè)面中獲取不到參數(shù)。
推薦是name和params搭配，path和query搭配。最好時(shí)不用params而只是用query的形式傳遞參數(shù)以及獲取參數(shù)，
因?yàn)椴捎胮arams的方式傳遞參數(shù)，當(dāng)你進(jìn)入到目的頁(yè)面后確實(shí)能夠正確地獲取參數(shù),但是，當(dāng)你刷新頁(yè)面時(shí)，參數(shù)就會(huì)丟失。
所以推薦使用query地形式傳遞參數(shù)。
最后談?wù)?router和$route地區(qū)別
結(jié)論：沒(méi)有任何關(guān)系
$router地類(lèi)型時(shí)VueRouter，整個(gè)項(xiàng)目只有一個(gè)VueRouter實(shí)例，使用$router是實(shí)現(xiàn)路由跳轉(zhuǎn)的，$router.push()。
跳轉(zhuǎn)成功后，抵達(dá)某一個(gè)頁(yè)面，此時(shí)要獲取從上一個(gè)頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù)，此時(shí)使用$route。
或者是$route.query.city，或者是$route.params.city。也就是說(shuō)，$router和$route作用在路由不同的階段。
<html>
<head><meta charset="UTF-8"></head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- <router-link> will be rendered as an `<a>` tag by default -->
<router-link to="/foo">登幽州臺(tái)歌</router-link>
<router-link to="/bar">江雪</router-link>
<router-link to="/city/中國(guó)">西安</router-link>
<router-link to="/city/希臘">雅典</router-link>
<router-link to="/book/史鐵生">務(wù)虛筆記</router-link>
<br>
<router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link><br>
<router-link :to="{ path: '/wuhan', query: {city: 'wuhan'}}">router2</router-link><br>
<router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view style="margin-top: 100px"></router-view>
</div>
<script>
// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>前不見(jiàn)古人，后不見(jiàn)來(lái)者。念天地之悠悠，獨(dú)愴然而涕下！</div>'};
const Bar = { template: '<div>千山鳥(niǎo)飛絕，萬(wàn)徑人蹤滅。孤舟蓑笠翁，獨(dú)釣寒江雪。</div>' };
const Capital = { template: '<div>時(shí)間已經(jīng)摧毀了多少個(gè)西安城，雅典城。{{$route.params.country}}</div>' }
const Book = {template: '<div>務(wù)虛筆記 ---by {{$route.params.author}}</div>'}
const WuHan = {template: '<div>武昌， 漢口， 漢陽(yáng) --- {{$route.params.city}}</div>'}
// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/city/:country', component: Capital },
{ path: '/book/:author', component: Book },
{ path: '/wuhan/:city', name: 'wuhan', component: WuHan }
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes: routes
})
/*
function navigate() {
router.push({
path: '/wuhan',
params: {
city: 'wuhan'
}
});
}
*/
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({router: router}).$mount('#app')
// Now the app has started!
</script>
</body>
</html>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格中鏈接進(jìn)行頁(yè)面跳轉(zhuǎn)與路由詳解
在vue中進(jìn)行前端網(wǎng)頁(yè)開(kāi)發(fā)時(shí),通常列表數(shù)據(jù)用el-table展示,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUi實(shí)現(xiàn)點(diǎn)擊表格中鏈接進(jìn)行頁(yè)面跳轉(zhuǎn)與路由的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關(guān)于vuex使用方法的相關(guān)資料,主要內(nèi)容包括Vuex的安裝和配置,以及如何在.vue文件中引入和使用Vuex狀態(tài),作者還分享了一種在模塊中存儲(chǔ)狀態(tài)的建議方法,并提供了具體的代碼示例,需要的朋友可以參考下2024-10-10
vue.js中使用微信掃一掃解決invalid signature問(wèn)題(完美解決)
這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問(wèn)題(推薦),本文通過(guò)實(shí)例代碼給出解決方法，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
vue+ElementUI實(shí)現(xiàn)訂單頁(yè)動(dòng)態(tài)添加產(chǎn)品數(shù)據(jù)效果實(shí)例代碼
Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)
vue項(xiàng)目中使用qrcodesjs2生成二維碼簡(jiǎn)單示例
Vue+ElementUI前端添加展開(kāi)收起搜索框按鈕完整示例
