vue路由傳參的基本實現方式小結【三種方式】
本文例項講述了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,component: Child } //父路由元件 <router-link :to="{name:'Child',query:{id:123}}">進入Child路由</router-link>
2、程式設計式
this.$router.push
使用該方式傳值的時候,同樣需要子路由提前配置好路由別名(name 屬性),例如:
//子路由配置 { path: '/child,params:{ id:123 } })
在子路由中可以通過下面程式碼來獲取傳遞的引數值
this.$route.query.id
希望本文所述對大家vue.js程式設計有所幫助。