溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vue路由傳參的基本實現方式。分享給大家供大家參考，具體如下：
vue 路由傳參的使用場景一般都是應用在父路由跳轉到子路由時，攜帶參數跳轉。傳參方式可劃分為 params 傳參和 query 傳參，而 params 傳參又可分為在 url 中顯示參數和不顯示參數兩種方式，這就是vue路由傳參的三種方式。
params 傳參（顯示參數）params 傳參（顯示參數）又可分為 聲明式 和 編程式 兩種方式
1、聲明式
router-link
該方式是通過 router-link 組件的 to 屬性實現，該方法的參數可以是一個字符串路徑，或者一個描述地址的對象。使用該方式傳值的時候，需要子路由提前配置好參數，例如：
//子路由配置
{
path: '/child/:id',
component: Child
}
//父路由組件
<router-link :to="/child/123">進入Child路由</router-link>
2、編程式
this.$router.push
使用該方式傳值的時候，同樣需要子路由提前配置好參數，例如：
//子路由配置
{
path: '/child/:id',
component: Child
}
//父路由編程式傳參(一般通過事件觸發)
this.$router.push({
path:'/child/${id}',
})
在子路由中可以通過下面代碼來獲取傳遞的參數值
this.$route.params.id
params 傳參（不顯示參數）params 傳參（不顯示參數）也可分為 聲明式 和 編程式 兩種方式，與方式一不同的是，這里是通過路由的別名 name 進行傳值的
1、聲明式
router-link
該方式也是通過 router-link 組件的 to 屬性實現，例如：
<router-link :to="{name:'Child',params:{id:123}}">進入Child路由</router-link>
2、編程式
this.$router.push
使用該方式傳值的時候，同樣需要子路由提前配置好參數，不過不能再使用 :/id 來傳遞參數了，因為父路由中，已經使用 params 來攜帶參數了，例如：
//子路由配置
{
path: '/child,
name: 'Child',
component: Child
}
//父路由編程式傳參(一般通過事件觸發)
this.$router.push({
name:'Child',
params:{
id:123
}
})
在子路由中可以通過下面代碼來獲取傳遞的參數值
this.$route.params.id
注意：上述這種利用 params 不顯示 url 傳參的方式會導致在刷新頁面的時候，傳遞的值會丟失
query 傳參（顯示參數）query 傳參（顯示參數）也可分為 聲明式 和 編程式 兩種方式
1、聲明式
router-link
該方式也是通過 router-link 組件的 to 屬性實現，不過使用該方式傳值的時候，需要子路由提前配置好路由別名（name 屬性），例如：
//子路由配置
{
path: '/child,
name: 'Child',
component: Child
}
//父路由組件
<router-link :to="{name:'Child',query:{id:123}}">進入Child路由</router-link>
2、編程式
this.$router.push
使用該方式傳值的時候，同樣需要子路由提前配置好路由別名（name 屬性），例如：
//子路由配置
{
path: '/child,
name: 'Child',
component: Child
}
//父路由編程式傳參(一般通過事件觸發)
this.$router.push({
name:'Child',
params:{
id:123
}
})
在子路由中可以通過下面代碼來獲取傳遞的參數值
this.$route.query.id
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
