同一路由带参刷新，以及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 生命周期上。
• 文档读的不够详细，其实现如今技术上碰到的问题，文档上基本都有写，以后遇事一定要多！看！文！档！！！

原文地址：https://segmentfault.com/a/1190000017306664