vue路由傳參的基本實現(xiàn)方式小結(jié)【三種方式】
本文實例講述了vue路由傳參的基本實現(xiàn)方式。分享給大家供大家參考,具體如下:
前言
vue 路由傳參的使用場景一般都是應用在父路由跳轉(zhuǎn)到子路由時,攜帶參數(shù)跳轉(zhuǎn)。傳參方式可劃分為 params
傳參和 query
傳參,而 params
傳參又可分為在 url 中顯示參數(shù)和不顯示參數(shù)兩種方式,這就是vue路由傳參的三種方式。
方式一:params 傳參(顯示參數(shù))
params
傳參(顯示參數(shù))又可分為 聲明式 和 編程式 兩種方式
1、聲明式
router-link
該方式是通過 router-link
組件的 to 屬性實現(xiàn),該方法的參數(shù)可以是一個字符串路徑,或者一個描述地址的對象。使用該方式傳值的時候,需要子路由提前配置好參數(shù),例如:
//子路由配置 { path: '/child/:id', component: Child } //父路由組件 <router-link :to="/child/123">進入Child路由</router-link>
2、編程式
this.$router.push
使用該方式傳值的時候,同樣需要子路由提前配置好參數(shù),例如:
//子路由配置 { path: '/child/:id', component: Child } //父路由編程式傳參(一般通過事件觸發(fā)) this.$router.push({ path:'/child/${id}', })
在子路由中可以通過下面代碼來獲取傳遞的參數(shù)值
this.$route.params.id
方式二:params 傳參(不顯示參數(shù))
params
傳參(不顯示參數(shù))也可分為 聲明式 和 編程式 兩種方式,與方式一不同的是,這里是通過路由的別名 name
進行傳值的
1、聲明式
router-link
該方式也是通過 router-link
組件的 to 屬性實現(xiàn),例如:
<router-link :to="{name:'Child',params:{id:123}}">進入Child路由</router-link>
2、編程式
this.$router.push
使用該方式傳值的時候,同樣需要子路由提前配置好參數(shù),不過不能再使用 :/id
來傳遞參數(shù)了,因為父路由中,已經(jīng)使用 params
來攜帶參數(shù)了,例如:
//子路由配置 { path: '/child, name: 'Child', component: Child } //父路由編程式傳參(一般通過事件觸發(fā)) this.$router.push({ name:'Child', params:{ id:123 } })
在子路由中可以通過下面代碼來獲取傳遞的參數(shù)值
this.$route.params.id
注意:上述這種利用 params
不顯示 url 傳參的方式會導致在刷新頁面的時候,傳遞的值會丟失
方式三:query 傳參(顯示參數(shù))
query 傳參(顯示參數(shù))也可分為 聲明式 和 編程式 兩種方式
1、聲明式
router-link
該方式也是通過 router-link
組件的 to 屬性實現(xiàn),不過使用該方式傳值的時候,需要子路由提前配置好路由別名(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 } //父路由編程式傳參(一般通過事件觸發(fā)) this.$router.push({ name:'Child', params:{ id:123 } })
在子路由中可以通過下面代碼來獲取傳遞的參數(shù)值
this.$route.query.id
希望本文所述對大家vue.js程序設計有所幫助。
相關(guān)文章
Vue實現(xiàn)動態(tài)查詢規(guī)則生成組件
今天我們來給大家介紹下在Vue開發(fā)中我們經(jīng)常會碰到的一種需求場景,本文主要介紹了Vue動態(tài)查詢規(guī)則生成組件,需要的朋友們下面隨著小編來一起學習學習吧2021-05-05vue3中的ref,toRef,toRefs三個的作用使用小結(jié)
Vue3中ref、reactive、toRef、toRefs都是與響應式數(shù)據(jù)相關(guān)的,就此做一份筆記作為區(qū)別,本文重點給大家講解vue3中的ref,toRef,toRefs三個是干嘛的,有什么作用,感興趣的朋友跟隨小編一起看看吧2022-11-11