關(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地類型時(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指令之v-for的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了VUE兄弟組件傳值操作,結(jié)合實(shí)例形式分析了VUE兄弟組件傳值操作的原理、步驟、實(shí)現(xiàn)方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-10-10
Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn)
本文主要介紹了Vue簡(jiǎn)化用戶查詢/添加功能的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue3中emits與attrs區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
如何在vue項(xiàng)目中嵌入jsp頁(yè)面的方法(2種)
這篇文章主要介紹了如何在vue項(xiàng)目中嵌入jsp頁(yè)面的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
使用Vue3+Vant組件實(shí)現(xiàn)App搜索歷史記錄功能(示例代碼)
最近接了個(gè)項(xiàng)目需要開(kāi)發(fā)一個(gè)app項(xiàng)目，由于是第一次接觸這種app開(kāi)發(fā)，經(jīng)過(guò)一番思考，決定使用Vue3+Vant前端組件的模式進(jìn)行開(kāi)發(fā)，下面把問(wèn)題分析及實(shí)現(xiàn)代碼分享給大家，需要的朋友參考下吧2021-06-06
Vue項(xiàng)目中安裝使用axios全過(guò)程
這篇文章主要介紹了Vue項(xiàng)目中安裝使用axios全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue表單綁定的實(shí)例代碼（單選按鈕,選擇框（單選時(shí),多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng)）
本文通過(guò)實(shí)例代碼給大家介紹了Vue表單綁定（單選按鈕，選擇框（單選時(shí)，多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng)）的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了Vuei18n 在數(shù)組中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08