2020-12-09

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 路由跳转和传参有一定的帮助