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