Vue-router向路由主件传参

通过配置路由的props进行传参

1. 如果 props 被设置为 true，route.params 将会被设置为组件属性。

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

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

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } //主件的props:['newsletterPopup']
  ]
})

3. 你可以创建一个函数返回 props。

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