Vue-router路由组件传参

正常情况下我们通用的传参方式主要是有一下两种方式：

//方式一 通过params
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

<router-link to="/user/123456"></router-link>

const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})

//方式二 通过juery

<router-link to="/register?plan=private"></router-link>

router.push({ path: 'register', query: { plan: 'private' }})

除了上面的，其实还有另外三种方式：

1.布尔模式、通过 props 解耦

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

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

2.对象模式、如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

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

3.函数模式、你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

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

URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。

请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。