query 通过查询字符串传参

1、受限于url长度限制、地址栏url不美观
2、刷新后参数不会丢失
3、设置props函数模式，将查询字符串以props形式传入路由组件，实现路由与组件解耦

const User = {
  props: ['query'],
  template: '<div>User {{ query}}</div>'
}
const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
  ]
}

/:id 动态路由路径传参（动态路由部分会被解析为路由的params参数）

1、受限于url长度限制、地址栏url不美观、路径需要拼接且有顺序要求、
3、设置 props布尔模式 ，将参数通过props传入路由组件，实现路由与组件解耦
4、刷新参数不会丢失

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },
  ]
})

params传参

1、刷新后params状态会丢失
2、参数数量大小没有限制
3、设置 props布尔模式 ，将参数通过props传入路由组件，实现路由与组件解耦

const User = {
  props: ['name'],
  template: '<div>User {{ name}}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user', name: user, component: User, props: true },
  ]
})
this.$router.push({name: user, params: {name：'bobo'})