技術標籤：vur-routervue.js

Vue router路由監聽、路由傳參

Vue 主要用於單頁面應用，各種複雜頁面的跳轉就需要通過第三方路由來實現，本文采用官方路由 vue-router進行跳轉，在這跳轉過程中，可以監聽路由變化，來執行一些方法或者根據路由傳遞的引數進行不同的響應。

具體程式碼如下：

watch: {
        //監測路由變化
        '$route'(to,from){
          //直接輸入相應得路由，保證導航欄正確啟用
          //this.routerJump();//這是路由跳轉執行的方法
          //判斷由詳情頁面跳轉到哪個路由下，相應修改啟用樣式
 

          switch (this.$route.query.content) {
            case "homePage":
              //this.addCSS(0);
              this.$router.replace("/homePage")
              break;
            case "dataCenter":
              //this.addCSS(1);
              this.$router.replace(
 
"/dataCenter")
              break;
            default:
              break;
          }       
        }
    }

程式碼解釋：
這個方法一定要寫在watch裡面
例：當我從"/ranking"路由跳轉到"/dataCenter"路由下
引數 to:代表的是變化後的路由物件，在這個例子中就是"/dataCenter"：
引數from:代表從哪個路由出來的，這個例子中屬於"/ranking"：

在this.routerJump()這個方法中，我通過判斷當前路由的name屬性，來進行展示頁面的不同效果；

 //路由跳轉方法
      routerJump(){
        switch (this.$route.name) {
          //當處於競賽詳情頁面取消導航啟用樣式
          case "admin":
            //this.addCSS(-1);
            break;
          //首頁啟用
          case "homePage":
            //this.addCSS(0);
            break;
          //資料中心頁啟用
          case "dataCenter":
            //this.addCSS(1);
            break;
          //排行榜頁啟用
          case "ranking":
            //this.addCSS(2);
            break;
          default:
            break;
        };
      }

路由傳參，我則是採用query方式，


通過this.$route.query.content獲取傳遞的引數，進行判斷。

本文采用query方式進行引數傳遞，不需要在路由上配置多餘東西，會在url欄顯示出傳遞的引數和值，再次重新整理就引數消失，為了避免URL欄出現不純粹資訊，我採用this.$router.replace("/homePage")，替換跳轉後的url地址。

結語

希望本次的分享，能夠幫助大家對vue 路由跳轉和傳參有一定的幫助