vue路由跳轉(zhuǎn)怎么傳遞參數(shù)

發(fā)布時(shí)間：2020-07-28 10:25:04 來(lái)源：億速云閱讀：155 作者：小豬欄目：web開(kāi)發(fā)

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

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

1）通過(guò)動(dòng)態(tài)路由方式

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

2）通過(guò)query屬性傳值

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

3）通過(guò)params屬性傳值

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

總結(jié)：

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

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

補(bǔ)充方法：

頁(yè)面刷新數(shù)據(jù)不會(huì)丟失

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

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

this.$route.params.id

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

向AI問(wèn)一下細(xì)節(jié)

vue路由跳轉(zhuǎn)怎么傳遞參數(shù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽