vue——动态路由以及地址传参

动态路由：
　　当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个”共用”的组件，并且还要传参数，渲染不同的数据
　　这就要用到动态路由跟路由传参了！
　　
　　1.首先是路由的设置
　　比如我们进入详情页需要三个动态参数，在路由中做如下设置：
　　

// 路由懒加载
    {
          path:'/detail/:typeId/:type/:typeName',
          name:'detail',
          component:resolve => require(['@/pages/detail'],resolve)
    },

2.当从不同入口进入详情页面，路由被激活时，执行路由守卫 beforeRouteEnter（created之前），得到路由参数

    beforeRouteEnter (to, from, next) {
          next(vm=>{
            vm.desc(to.params.id); //desc是得到详情的接口；
          });
     },

3.beforeRouteEnter只是当路由放生变化的时候才执行，那么如何监听路由后面参数的变化呢，这时候路由守卫beforeRouteUpdate就要上场啦（watch虽然也可以解决，但是watch由于在时刻监听，所以在此很消耗内存，影响性能。不推荐在此使用watch）

    beforeRouteUpdate(to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`;
      // console.log(to);
      this.id = to.params.id;
      this.desc(this.id);
      next();
    }

在vue中，用地址栏传递参数有两种方法，一是query，另一个是params

两者的区别在于，query在地址栏中是可见的，而params是不可见的，相对来说更安全一点。
两者用法如下：
query要指定path,
params要指定name，在组件中也要声明name;

this.$router.push({path:'/detail',query:{typeId:this.id,type:1,name:this.name}})

this.$router.push({name:'detail',params:{typeId:this.id,type:2,name:this.name}})

vue——动态路由以及地址传参

猜你喜欢