Vue.js動態(tài)路由匹配，為什么不能識別路由參數(shù)呢

圖片描述

如上圖，想要實現(xiàn)兩個菜單選項共用一個頁面，通過路由參數(shù)來判斷功能從而篩選顯示不同的內(nèi)容。

      selectMenu:function(key, keyPath){
        console.log(key);
        switch(key){
          case '1':this.$router.push('/index');break;
          case '2-1-1':this.$router.push({path:'/sale/sureList/0',name:'待確認訂單'});break;
          case '2-1-2':this.$router.push('/logistics/logisticsList/0');break;
          case '2-1-3':this.$router.push({path:'/sale/sureList/',name:'訂單管理'});break;
          default:break;
        }
      }

上面是菜單控制函數(shù)，當我選擇待確認菜單時，路由成功匹配到路由中的第一項，status =0。但實際上我在surList.vue頁面獲取路由參數(shù)失敗，報錯：[vue-router] missing param for named route "待確認訂單": Expected "status" to be defined

導致界面不能正確渲染，還是原來的確認訂單界面，如下圖所示（有點丑，為了實現(xiàn)效果）。標題的渲染是根據(jù)路由參數(shù)來判斷顯示的。

圖片描述

可耐的小伙伴們，求助求助！

///////////////////////////////////////////////////////////////////////////////////
下面是監(jiān)聽路由情況下打印輸出的路由及路由參數(shù)
圖片描述

回答

編輯回答

拽很帥

github躶體項目搭建地址 https://github.com/web-tianfe...

2017年4月12日 10:33

編輯回答

脾氣硬

傳遞參數(shù)

this.$router.push({name:'routername',query:{id:...}});

獲取參數(shù)

this.$route.query.id

2018年2月24日 01:44

編輯回答

我不懂

你應該是this.$router.push用錯了

2018年9月21日 07:32

編輯回答

絯孑氣

首先，selectMenu方法不建議在跳轉(zhuǎn)路由的時候帶有中文的name，或者說路由的定義不建議用中文
其次，你想用path:'/sale/sureList/'時，進入訂單管理頁，但是路由指向的是待確認訂單的路由，并且提示status未定義，所以你可以這樣定義路由試試

path: '/sale/sureList'

另外，我做過類似的頁面，兩個路由指向同一個頁面，這個時候在進行頁面的切換時，并不會重新掛載，所以獲取路由名稱方式用mounted方法和watch監(jiān)聽方法一起做。

watch: {
  '$route': function (route) {
    // 監(jiān)聽路由變化
    console.log("router changed");
    let routerName = this.$route.name;
    console.log(routerName);
  }
},
mounted(){
  let routerName = this.$route.name;
  console.log(routerName);
}

///////////////////////////////////////
簡單測試url傳遞參數(shù)輸出params：

2018年5月2日 20:55

編輯回答

淡墨

??！$route.pus()使用錯誤
查看$route.push()用法，發(fā)現(xiàn)一般有下面的三種用法，而我原來寫的那種路徑加名字是不合法的。
試著使用第二種和第三種命名法:this.$router.push({name:'待確認訂單',params:{status:'0'}})，成功了。：）要么只push路徑path，要么push name和參數(shù)status確定路由。

(1)字符串

router.push('home')

(2)// 對象

this.$router.push({path: '/login?url=' + this.$route.path});

(3)// 命名的路由,后面的參數(shù)為動態(tài)路由的參數(shù)

router.push({ name: 'user', params: { userId: 123 }})

(4)// 帶查詢參數(shù)，變成/backend/order?selected=2

this.$router.push({path: '/backend/order', query: {selected: "2"}});

2018年4月10日 16:09