同一路由带参刷新，以及params和query两种方式传参的异同

同一路由应该不叫跳转了吧，就先叫刷新好了。

需求及问题

今天作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 在路由传值的异同

1. 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

2. query 更加相似于咱们 ajax 中 get 传参，params 则相似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示：

query：

params：

总结

• 在路由复用时，分为两个阶段，一个是进入此路由的阶段，也就是 beforeRouteEnter 阶段，另外一个是更新路由的阶段，即 beforeRouteUpdate 阶段。
• 没有区分 Vue 和 Vue Router 的概念，致使在路由上的操做还停留在 Vue 生命周期上。
• 文档读的不够详细，其实现现在技术上碰到的问题，文档上基本都有写，之后遇事必定要多！看！文！档！！！