日常業務中，路由跳轉的同時傳遞引數是比較常見的，傳參的方式有三種：

1）通過動態路由方式

//路由配置檔案中 配置動態路由
{
   path: '/detail/:id',name: 'Detail',component: Detail
  }
//跳轉時頁面
var id = 1;
this.$router.push('/detail/' + id)
 
//跳轉後頁面獲取引數
this.$route.params.id

2）通過query屬性傳值

//路由配置檔案中
{
   path: '/detail',component: Detail
  }
//跳轉時頁面
this.$router.push({
 path: '/detail',query: {
  name: '張三'，
  id: 1,}
})
 
//跳轉後頁面獲取引數物件
this.$route.query 

3）通過params屬性傳值

//路由配置檔案中
{
   path: '/detail',component: Detail
  }
//跳轉時頁面
this.$router.push({
 name: 'Detail',params: {
  name: '張三'，
  id: 1,}
})
 
//跳轉後頁面獲取引數物件
this.$route.params 

總結：

1.動態路由和query屬性傳值 頁面重新整理引數不會丟失， params會丟失

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

補充方法：

頁面重新整理資料不會丟失

methods：{
 insurance(id) {
    //直接呼叫$router.push 實現攜帶引數的跳轉
    this.$router.push({
     path: `/particulars/${id}`,})
}

需要對應路由配置如下：

this.$route.params.id

到此這篇關於vue路由跳轉傳遞引數的方式總結的文章就介紹到這了,更多相關vue路由跳轉傳遞引數的三種方式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！