同一路由帶參刷新，以及params和query兩種方式傳參的異同

同一路由應該不叫跳轉了吧，就先叫刷新好了。

需求及問題

今天作web課設有這樣一個需求：

在導航欄中一項叫作教師隊伍一級菜單下，有三個二級菜單，分別爲教授、副教授、講師。這三個二級菜單分別對應一個頁面。可是因爲顯示的排版相同，只是教師信息不一樣，故想用同一頁面，經過選擇不一樣的菜單，傳入不一樣的參數，顯示不一樣的信息。

剛開始的想法是，在實例建立階段，也就是created階段將導航欄傳給子組件的參數獲取到

父組件：

this.$router.push({
        path: '/jsjj',
        query:{
            id:index
        }
    })

子組件：

created(){
        this.id = this.$route.query.id;
        console.log(this.id);
    },

可是我錯了。當第一次跳轉複用路由時，created確實能夠獲取到父組件傳遞的值，但當帶參數刷新當前路由時，created沒有被調用。緣由是組件已經被建立。

而後嘗試了在 Vue 生命週期各個步驟，只有在建立先後，掛載先後能夠獲取到參數。一樣，當路由刷新時又獲取不到了。

這可怎麼辦。後來查閱了度娘，纔想起來還有 Vue Router 導航守衛 這麼個東西。導航即路由正在發生變化。（哎，仍是代碼敲得少）

文檔中明確說到：

記住參數或查詢的改變並不會觸發進入/離開的導航守衛。你能夠經過觀察 $route 對象來應對這些變化，或使用 beforeRouteUpdate 的組件內守衛。

因此要用 beforeRouteUpdate 這個方法來獲取當前刷新路由的參數：

beforeRouteUpdate(to, from, next){
        this.id = to.query.id;
        console.log(this.id);
        next();
    }

其中 next() 方法必定要加，不然路由跳轉不會向下執行。

而後又遇到問題，只用 beforeRouteUpdate 方法，當第一次跳轉到這個複用路由的時候，又獲取不到參數了，緣由是隻有刷新路由時纔會調用這個方法，當第一次進入到路由時不會調用這個方法，因此又獲取不到。

那麼在第一次跳轉進來的時候再獲取一下不就行了嘛～把我以前寫的 created 方法和 beforeRouteUpdate 方法結合一下，大功告成！

Create(){
        this.id = this.$route.query.id;
        console.log('a');
        console.log(this.id);
    },
    beforeRouteUpdate(to, from, next){
        this.id = to.query.id;
        console.log('b');
        console.log(this.id);
        next();
        // this.id = this.$route.params.id;
    },

可是這樣寫總感受有點難受，畢竟一個是 Vue 的生命週期函數，一個是 Vue Router 的相似鉤子函數的函數。

而後發現其實也能夠用 Vue Router 的 beforeRouteEnter 函數來實現 Created 裏的功能。

解決辦法

父組件：

this.$router.push({
        path: '/jsjj',
        query:{
            id:index
        }
    })

子組件：

beforeRouteEnter(to, from, next){
        console.log('g');
        console.log(to);
        console.log(to.query.id);
        next();
    },
    beforeRouteUpdate(to, from, next){
        this.id = to.query.id;
        console.log('b');
        console.log(this.id);
        next();
    },

其中還有個問題要注意，必定要使用 query 方式傳參，params 方式傳餐無效。

強迫症的我獲得瞭解脫！

params 和 query 在路由傳值的異同

1. query 要用 path 來引入，params 要用 name 來引入，接收參數都是相似的，分別是this.$route.query.name 和 this.$route.params.name。

   this.$router.push({
          name:"detail", // 要對應router.js裏面的name名稱
          params:{
            name:'nameValue',
            code:10011
          }
       });
   
       // 獲取參數                                                      
       this.$route.params.name
       
       this.$router.push({
          name:"/detail",
          query:{
            name:'nameValue',
            code:10011
         }
       });
       
       // 獲取參數                                                      
       this.$route.query.name

2. query 更加相似於咱們 ajax 中 get 傳參，params 則相似於 post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示：

query：

params：

總結

• 在路由複用時，分爲兩個階段，一個是進入此路由的階段，也就是 beforeRouteEnter 階段，另外一個是更新路由的階段，即 beforeRouteUpdate 階段。
• 沒有區分 Vue 和 Vue Router 的概念，致使在路由上的操做還停留在 Vue 生命週期上。
• 文檔讀的不夠詳細，其實現現在技術上碰到的問題，文檔上基本都有寫，之後遇事必定要多！看！文！檔！！！