vue Router 路由组件传参

主要目的为了解决不同路由在使用相同组件时高耦合，使用router中的props将路由和组件进行耦。
用法如下：

props 为布尔值

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

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/name/:id',
      components: User,
      props: true
    }
  ]
})
// xxx/:id 中id可以在组件的props中进行获取并使用

tips：当props为true时路由传递的参数router.params 将被设置为组件的属性 。

props 为对象模式

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

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/name/:id',
      components: User,
      props: {newsletterPopup:'name'}
    }
  ]
})
// newsletterPopup可以在组件的props中进行获取并使用

tips：当props为对象时会被设置为组件的属性可以直接通过组件的props 进行获取。

props 为函数模式

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

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/name/:id',
      components: User,
      props: (route)=>({newsletterPopup:route.query.q})
    }
  ]
})
// url: /xxx?q=test 会将 {newsletterPopup:test}传送给组件,组件的props中进行获取并使用

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