vue路由params和query传参区别

开发过程中经常会遇到路由跳转需要携带参数的情况，在大多数单页面中，一般都是通过使用vue-router来实现路由的。通过在Vue实例内部访问$router来访问路由实例，调用this.$router.push导航到不同的URL。

注意：
$router是Vue-router实例，用$router.push方法导航到不同的URL
$route是当前router跳转对象，获取name、path、query、params等

• params传参

  //传参
  this.$router.push({ 
      name: 'testpath', 
      params: { 
          userId: '123' 
      }
  })
  // 这里的 params 不生效
  this.$router.push({ 
      path: '/test', 
      params: { 
          userId:'123' 
      }
  }) 
   //接收参数
  this.$route.params.userId
  

• query传参

  // 带查询参数，变成 /testpath?test=abc
  this.$router.push({ 
     path: 'testpath', 
     query: { 
       test: 'abc'
     }
  })
  //接收参数
  this.$route.query.test
  

params传参，只能通过name来引入路由，push里面只有写name才会生效，path不生效，接收参数会是undefined。

区别：
1、params传参不会显示在URL中，query传参会显示在URL中
2、query传参path和name都可以，params只能用name
3、params参数F5强制刷新会被清空