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

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

// 路由懒加载
{
path:'/detail/:typeId/:type/:typeName',
name:'detail',
component:resolve => require(['@/pages/detail'],resolve)
},
1
2
3
4
5
6
2.当从不同入口进入详情页面，路由被激活时，执行路由守卫 beforeRouteEnter（created之前），得到路由参数

beforeRouteEnter (to, from, next) {
next(vm=>{
vm.desc(to.params.id); //desc是得到详情的接口；
});
},
1
2
3
4
5
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}})
1
this.$router.push({name:'detail',params:{typeId:this.id,type:2,name:this.name}})