将 vuex 的数据作为 vue router 的 prop 数据

当然, 如果一个组件需要 vuex 里的数据, 那么可以在组件内部利用 this.$store 获取. 但是这样的话, 该组件就包含了一些隐式的依赖, 看代码的时候并不能清楚地知道它依赖哪些数据. 理想情况下, 一个组件对外的接口应该只有 props 和 events, 这样的组件才便于复用和测试.

如果一个路由匹配到的 component 需要传入 prop, 该如何做?

如果是 <router-link> 进行的跳转, 那么直接绑定即可: <router-link to='/foo' :propA="dataA" :propB="dataB">to Foo</router-link>, 如果是利用 router.push 进行编程式导航, 那么可以利用以下几种模式传入 props

对象模式

如果 prop 的值在这个路由上是固定的, 那么很简单, 创建路由器实例时将 prop 写上即可:

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

函数模式

但是 props 的值很少是静态的, 所以 vue-router 也支持用函数模式传入 props:

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

创建路由实例时将对应路由的 props 定义为一个函数, 该函数接受 route 参数, 返回值是一个对象. route 参数是路由对象 (route object), 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的路由记录 (route records)。

可以充分利用 route 参数上携带的数据构造 props, route.matched 属性数据量非常大, 包含当前路由的所有嵌套路径片段的路由记录. 可以投机取巧地利用该数组里的数据访问到 vue 实例上挂载的 vuex 数据: route.matched[0].instances.default.$store

布尔模式

如果确实需要 vuex 里的数据, 那么利用 route.matched 来获取其实是比较 hack 比较不直观的做法. 更好的做法是构造路由器时使用布尔模式:

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: true
  ]
})

如果 props 被设置为 true,route.params 将会被设置为组件属性。route.params 除了包含路由匹配到的动态参数, 也可以手动传入数值. 如:

this.$router.push({ name: 'editMeeting', params: { userRole: 'admin', editMode: 'edit' } })

编程式导航有它自己需要注意的地方, 建议给 this.$router.push 传入带 name 属性的对象.