同一路由应该不叫跳转了吧，就先叫刷新好了。
需求及问题
今天做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 在路由传值的异同
-
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 - query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示：
query：
params：
总结
- 在路由复用时，分为两个阶段，一个是进入此路由的阶段，也就是 beforeRouteEnter 阶段，另一个是更新路由的阶段，即 beforeRouteUpdate 阶段。
- 没有区分 Vue 和 Vue Router 的概念，导致在路由上的操作还停留在 Vue 生命周期上。
- 文档读的不够详细，其实现如今技术上碰到的问题，文档上基本都有写，以后遇事一定要多！看！文！档！！！