小編這次要給大家分享的是vue路由跳轉(zhuǎn)怎么傳遞參數(shù)，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),奉化企業(yè)網(wǎng)站建設(shè),奉化品牌網(wǎng)站建設(shè),網(wǎng)站定制,奉化網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,奉化網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

日常業(yè)務(wù)中，路由跳轉(zhuǎn)的同時傳遞參數(shù)是比較常見的，傳參的方式有三種：

1）通過動態(tài)路由方式

//路由配置文件中 配置動態(tài)路由
{
   path: '/detail/:id',
   name: 'Detail',
   component: Detail
  }
//跳轉(zhuǎn)時頁面
var id = 1;
this.$router.push('/detail/' + id)
 
//跳轉(zhuǎn)后頁面獲取參數(shù)
this.$route.params.id

2）通過query屬性傳值

//路由配置文件中
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//跳轉(zhuǎn)時頁面
this.$router.push({
 path: '/detail',
 query: {
  name: '張三'，
  id: 1,
 }
})
 
//跳轉(zhuǎn)后頁面獲取參數(shù)對象
this.$route.query 

3）通過params屬性傳值

//路由配置文件中
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//跳轉(zhuǎn)時頁面
this.$router.push({
 name: 'Detail',
 params: {
  name: '張三'，
  id: 1,
 }
})
 
//跳轉(zhuǎn)后頁面獲取參數(shù)對象
this.$route.params 

總結(jié)：

1.動態(tài)路由和query屬性傳值 頁面刷新參數(shù)不會丟失， params會丟失

2.動態(tài)路由一般用來傳一個參數(shù)時居多(如詳情頁的id), query、params可以傳遞一個也可以傳遞多個參數(shù) 。

補充方法：

頁面刷新數(shù)據(jù)不會丟失

methods：{
 insurance(id) {
    //直接調(diào)用$router.push 實現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
    this.$router.push({
     path: `/particulars/${id}`,
    })
}

需要對應(yīng)路由配置如下：

this.$route.params.id

看完這篇關(guān)于vue路由跳轉(zhuǎn)怎么傳遞參數(shù)的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。