Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
路由跳轉(zhuǎn)的三種方法
1.path路徑跳轉(zhuǎn)
傳值可以使用params傳值和query傳值 (缺點(diǎn):不能傳引用數(shù)據(jù)類(lèi)型-數(shù)組,對(duì)象等)
//寫(xiě)法1 <router-link to="/artlist">小說(shuō)列表</router-link> //router-link解析出來(lái)其實(shí)是a標(biāo)簽 //路由配置 export default new VueRouter({ routes: [ { path: "/artlist", component: ArtList, } ] });
//寫(xiě)法2 <router-link :to="path1">小說(shuō)列表</router-link> //寫(xiě)法3 <router-link :to="'/artlist'">小說(shuō)列表</router-link> ... data() { return{ path1:'/artlist' } } //但是還需要進(jìn)行路由配置 export default new VueRouter({ routes: [ { path: "/artlist", component: ArtList, } ] });
2.編程式路由 this.$router.push()
(最常用的,不受時(shí)機(jī)、條件的限制)。
傳值可以用params 傳值和query傳值
(優(yōu)點(diǎn):可以傳基本數(shù)據(jù)類(lèi)型和數(shù)組,對(duì)象)
jumpHome() { this.$router.push({ path:"/home", query:{ id:this.id } }) } ... //接收值如果進(jìn)入另一個(gè)頁(yè)面,一般在created中接收 this.$route.query.id //路由配置 { path: "/home", component: ()=>import("../Home") } //或者name和params搭配,接收值 this.$route.params.id
3.命名式路由跳轉(zhuǎn)(name)
傳值可以使用params和query傳值
(優(yōu)點(diǎn):可以傳基本數(shù)據(jù)類(lèi)型和數(shù)組,對(duì)象)
<router-link :to="{name:'shop',query:{city:cityObj}}">購(gòu)物車(chē)</router-link> ... //路由配置 { path:'/shop', //該path路徑不能少。因?yàn)槊铰酚商D(zhuǎn)是通過(guò)name找到該path name:'shop', component:Shop }
路由傳參的三種方法
一、params傳參
this.$router.push({ name:"admin", //這里的params是一個(gè)對(duì)象,id是屬性名,item.id是值(可以從當(dāng)前組件或者Vue實(shí)例上直接取) params:{id:item.id} }) //這個(gè)組件對(duì)應(yīng)的路由配置 { //組件路徑 path: '/admin', //組件別名 name: 'admin', //組件名 component: Admin, }
通過(guò)params傳遞參數(shù),如果我們想獲取 id 的參數(shù)值,可以通過(guò) this.$route.params.id 這種方式來(lái)打印出來(lái)就可以得到了;
注意:獲取參數(shù)的時(shí)候是 $route,跳轉(zhuǎn)和傳參的時(shí)候是 $router
二、路由屬性配置傳參:
this.$router.push({ name:"/admin/${item.id}", }) //這個(gè)組件對(duì)應(yīng)的路由配置 { //組件路徑 path: '/admin:id', //組件別名 name: 'admin', //組件名 component: Admin, }
通過(guò)路由屬性配置傳參我們可以用 this.$route.params.id 來(lái)獲取到 id 的值,
注意: this. $router.push 方法里面路徑帶的是值,路由配置項(xiàng)那里帶的是變量名(屬性名)來(lái)實(shí)現(xiàn)的對(duì)應(yīng);
以上兩種傳參方式基本上可以理解為 ajax 中的 post 請(qǐng)求方式,參數(shù)都是不可見(jiàn)的,但是上面兩種方法都有一個(gè)弊端,就是當(dāng)頁(yè)面刷新了是獲取不到參數(shù)值的,那么有沒(méi)有一種方法是頁(yè)面刷新之后參數(shù)依然存在呢?
三、query傳參
this.$router.push({ name:"/admin", query:{id:item.id} }) //這個(gè)組件對(duì)應(yīng)的路由配置 { //組件路徑 path: '/admin', //組件別名 name: 'admin', //組件名 component: Admin, }
第三種方式是用 query 來(lái)傳參,這種方式是可以解決頁(yè)面刷新參數(shù)消失問(wèn)題的,這種方式可以理解為是 ajax 中的 get 方法,參數(shù)是直接在 url 后面添加的,參數(shù)是可見(jiàn)的,所以解決頁(yè)面刷新參數(shù)消失問(wèn)題建議使用此方法來(lái)解決;
區(qū)別
(1)params傳參
- 只能用 name,不能用 path。
- 地址欄不顯示參數(shù)名稱(chēng) id,但是有參數(shù)的值。
(2)query傳參
- name 和 path 都能用。用 path 的時(shí)候,提供的 path 值必須是相對(duì)于根路徑的相對(duì)路徑,而不是相對(duì)于父路由的相對(duì)路徑,否則無(wú)法成功訪(fǎng)問(wèn)。
- 地址欄顯示參數(shù)格式為?id=0&code=1
到此這篇關(guān)于Vue中的路由跳轉(zhuǎn)及傳參的多種方法的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn)傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能示例
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能,結(jié)合實(shí)例形式分析了vue+elementUI表單相關(guān)操作技巧,需要的朋友可以參考下2019-05-05vue 實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求
這篇文章主要介紹了vue 如何實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-05-05vue項(xiàng)目在線(xiàn)上服務(wù)器訪(fǎng)問(wèn)失敗原因分析
這篇文章主要介紹了vue項(xiàng)目在線(xiàn)上服務(wù)器訪(fǎng)問(wèn)失敗原因分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08Vue組件Draggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue組件Draggable實(shí)現(xiàn)拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12vuejs2.0實(shí)現(xiàn)一個(gè)簡(jiǎn)單的分頁(yè)示例
本篇文章主要介紹了vuejs2.0實(shí)現(xiàn)一個(gè)簡(jiǎn)單的分頁(yè)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝實(shí)例
組件(Component) 是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝的相關(guān)資料,需要的朋友可以參考下2021-09-09vue2.0 watch里面的 deep和immediate用法說(shuō)明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10vite項(xiàng)目配置less全局樣式的實(shí)現(xiàn)步驟
最近想實(shí)現(xiàn)個(gè)項(xiàng)目,需要配置全局less,本文主要介紹了vite項(xiàng)目配置less全局樣式的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02