vue router路由query传参和params传参区别

首先要区分this.$router 和this.$route:

• $router为VueRouter实例，想要导航到不同URL，则使用$router.push等方法
• $route为当前router跳转对象，里面可以获取name、path、query、params等参数信息

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

传参:
this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })
  
接收参数:
this.$route.query.id

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

传参: 
this.$router.push({
        name:'/xxx',
        params:{
          id:id
        }
      })
  
接收参数:
this.$route.params.id

3.展示上的

注意:

1.params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！（params 和path属性不能共存 所以只能用name）。

2.另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

3.params 传参后，刷新页面会失去拿到的参数。所以路由参数要修改为 '/home/:username'（官方称为动态路由）。多个参数之间使用 “/” 分隔，如：path: '/my/:id?/:name?'

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home/:username',
    name: '/home',
    component: Home
  },
  {
    path: '/my/:id?/:name?',
    component: MyPage,
    name: 'my',           
  }
]
声明式：
<router-link :to="{name: 'home', params: { username: username } }">用户名</router-link>
<router-link :to="{name:'my',params: {id: myId,name: myName}}"></router-link>
编程式：
this.$router.push({
    name: 'home', //注意使用 params 时一定不能使用 path
    params: { username: this.username },
  })
this.$router.push({
    name: 'home', //注意使用 params 时一定不能使用 path
    params: { id: 1,name:"张三" },
  })