vue-router query和params传参的区别

总结

（1）在通过params传递参数时,只能用 name:'/xxx'   不能用  path:'/xxx'  ,否则接收参数时会出现Undefined 

 因为params只能用name来引入路由，query用path、name都可以引入

（2）一般情况下，通过query方式传参，刷新页面后依然可以获取到刷新前传过来的参数，而通过params传递参数时，刷新后会导致参数丢失出现Undefined

但是我想要params在地址栏上的简洁，又想要query刷新不丢失参数怎么办？

那我们就需要在params的基础上给路由声明一下参数，再刷新就不会丢失了

例如：添加“: id”

   {
      path: '/XXXX/:id',
      name: 'XXXX',
      component: component
    },

效果：

注意注意注意：这种在路由上声明参数的写法，当使用<router-Link  to="/">跳转时，需要添加参数，否则跳转后页面啥也不会显示！！！

1.query方式传参和接收参数

（1）传递参数

this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })

接收参数：

this.$route.query.id

通过query方式传参会在地址栏上出现参数和参数名，有点类似于Get请求

例：

注：传参是this.$router,接收参数是this.$route

this.$router与this.$route

$route为当前router跳转对象，里面可以获取name、path、query、params等

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

2.params方式传参和接收参数

传参

this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  

接收参数

this.$route.params.id

通过params方式传参会在地址栏上只会有路径，有点类似于Post请求

例：

本文是在滑动验证页面上理解后，补充修改