欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue路由傳參的基本實現(xiàn)方式小結(jié)【三種方式】

 更新時間:2023年10月11日 09:29:30   作者:不想寫代碼的碼農(nóng)  
這篇文章主要介紹了vue路由傳參的基本實現(xiàn)方式,結(jié)合實例形式總結(jié)分析了vue.js路由傳參的三種實現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下

本文實例講述了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)文章

  • el-select 下拉框全選、多選的幾種方式組件示例詳解

    el-select 下拉框全選、多選的幾種方式組件示例詳解

    這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-12-12
  • 總結(jié)vue映射的方法與混入的使用過程

    總結(jié)vue映射的方法與混入的使用過程

    這篇文章主要介紹了總結(jié)vue映射的方法與混入的使用過程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue-router為激活的路由設置樣式操作

    vue-router為激活的路由設置樣式操作

    這篇文章主要介紹了vue-router為激活的路由設置樣式操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue實現(xiàn)動態(tài)查詢規(guī)則生成組件

    Vue實現(xiàn)動態(tài)查詢規(guī)則生成組件

    今天我們來給大家介紹下在Vue開發(fā)中我們經(jīng)常會碰到的一種需求場景,本文主要介紹了Vue動態(tài)查詢規(guī)則生成組件,需要的朋友們下面隨著小編來一起學習學習吧
    2021-05-05
  • vue3中的ref,toRef,toRefs三個的作用使用小結(jié)

    vue3中的ref,toRef,toRefs三個的作用使用小結(jié)

    Vue3中ref、reactive、toRef、toRefs都是與響應式數(shù)據(jù)相關(guān)的,就此做一份筆記作為區(qū)別,本文重點給大家講解vue3中的ref,toRef,toRefs三個是干嘛的,有什么作用,感興趣的朋友跟隨小編一起看看吧
    2022-11-11
  • Vue.js中的下載和調(diào)用方式

    Vue.js中的下載和調(diào)用方式

    這篇文章主要介紹了Vue.js中的下載和調(diào)用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-11-11
  • Vue3中組件數(shù)據(jù)通信方式總結(jié)

    Vue3中組件數(shù)據(jù)通信方式總結(jié)

    如果在面試中,面試官問你Vue組件之間有哪些數(shù)據(jù)通信方式,你會怎么回復,不要擔心,本文為大家整理了超全的Vue3中組件數(shù)據(jù)通信方式,需要的小伙伴快收藏起來吧
    2023-06-06
  • Vue實現(xiàn)一個圖片懶加載插件

    Vue實現(xiàn)一個圖片懶加載插件

    這篇文章主要給大家介紹了關(guān)于利用Vue實現(xiàn)一個圖片懶加載的插件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者使用vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-03-03
  • vue移動端實現(xiàn)紅包雨效果

    vue移動端實現(xiàn)紅包雨效果

    這篇文章主要為大家詳細介紹了vue移動端實現(xiàn)紅包雨效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-07-07
  • 詳解Vue中狀態(tài)管理Vuex

    詳解Vue中狀態(tài)管理Vuex

    vuex是一個專門為vue.js設計的狀態(tài)管理模式,并且也可以使用devtools進行調(diào)試。
    2017-05-05

最新評論