本文實(shí)例講述了vue路由傳參的基本實(shí)現(xiàn)方式。分享給大家供大家參考，具體如下：

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)大豐免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

前言

vue 路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí)，攜帶參數(shù)跳轉(zhuǎn)。傳參方式可劃分為 params 傳參和 query 傳參，而 params 傳參又可分為在 url 中顯示參數(shù)和不顯示參數(shù)兩種方式，這就是vue路由傳參的三種方式。

方式一：params 傳參（顯示參數(shù)）

params 傳參（顯示參數(shù)）又可分為 聲明式 和 編程式 兩種方式

1、聲明式 router-link

該方式是通過(guò) router-link 組件的 to 屬性實(shí)現(xiàn)，該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。使用該方式傳值的時(shí)候，需要子路由提前配置好參數(shù)，例如：

//子路由配置
{
 path: '/child/:id',
 component: Child
}
//父路由組件
<router-link :to="/child/123">進(jìn)入Child路由</router-link>

2、編程式 this.$router.push

使用該方式傳值的時(shí)候，同樣需要子路由提前配置好參數(shù)，例如：

//子路由配置
{
 path: '/child/:id',
 component: Child
}
//父路由編程式傳參(一般通過(guò)事件觸發(fā))
this.$router.push({
  path:'/child/${id}',
})

在子路由中可以通過(guò)下面代碼來(lái)獲取傳遞的參數(shù)值

this.$route.params.id

方式二：params 傳參（不顯示參數(shù)）

params 傳參（不顯示參數(shù)）也可分為 聲明式 和 編程式 兩種方式，與方式一不同的是，這里是通過(guò)路由的別名 name 進(jìn)行傳值的

1、聲明式 router-link

該方式也是通過(guò) router-link 組件的 to 屬性實(shí)現(xiàn)，例如：

<router-link :to="{name:'Child',params:{id:123}}">進(jìn)入Child路由</router-link>

2、編程式 this.$router.push

使用該方式傳值的時(shí)候，同樣需要子路由提前配置好參數(shù)，不過(guò)不能再使用 :/id 來(lái)傳遞參數(shù)了，因?yàn)楦嘎酚芍?，已?jīng)使用 params 來(lái)攜帶參數(shù)了，例如：

//子路由配置
{
 path: '/child,
 name: 'Child',
 component: Child
}
//父路由編程式傳參(一般通過(guò)事件觸發(fā))
this.$router.push({
  name:'Child',
  params:{
   id:123
  }
})

在子路由中可以通過(guò)下面代碼來(lái)獲取傳遞的參數(shù)值

this.$route.params.id

注意：上述這種利用 params 不顯示 url 傳參的方式會(huì)導(dǎo)致在刷新頁(yè)面的時(shí)候，傳遞的值會(huì)丟失

方式三：query 傳參（顯示參數(shù)）

query 傳參（顯示參數(shù)）也可分為 聲明式 和 編程式 兩種方式

1、聲明式 router-link

該方式也是通過(guò) router-link 組件的 to 屬性實(shí)現(xiàn)，不過(guò)使用該方式傳值的時(shí)候，需要子路由提前配置好路由別名（name 屬性），例如：

//子路由配置
{
 path: '/child,
 name: 'Child',
 component: Child
}
//父路由組件
<router-link :to="{name:'Child',query:{id:123}}">進(jìn)入Child路由</router-link>

2、編程式 this.$router.push

使用該方式傳值的時(shí)候，同樣需要子路由提前配置好路由別名（name 屬性），例如：

//子路由配置
{
 path: '/child,
 name: 'Child',
 component: Child
}
//父路由編程式傳參(一般通過(guò)事件觸發(fā))
this.$router.push({
  name:'Child',
  params:{
   id:123
  }
})

在子路由中可以通過(guò)下面代碼來(lái)獲取傳遞的參數(shù)值

this.$route.query.id

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

文章題目：vue路由傳參的基本實(shí)現(xiàn)方式小結(jié)【三種方式】
新聞來(lái)源：http://www.aaarwkj.com/article24/gojhce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站維護(hù)、Google、網(wǎng)站營(yíng)銷、ChatGPT、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)