（八、路由组件传参）

路由组件传参

（1）路由组件传参

组件中使用$route会使之与其对应的路由形成高度耦合，从而使组件只能在特定的url上使用限制灵活性。

（2）使用props解耦

例：

const User = {
     
  template: '
User {
     { $route.params.id }}
'
}
const router = new VueRouter({
     
  routes: [
    {
      path: '/user/:id', component: User }
  ]
})
// 通过props解耦
const User = {
     
  props: ['id'],
  template: '
User {
     { id }}
'
}
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.1）布尔模式
  如果 props 被设置为 true，route.params 将会被设置为组件属性。
• （2.2）对象模式
  如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
  例：

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

• (2.3)函数模式
  创建一个函数返回 props。这样可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
  例：

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

（3）vue路由传递参数方法总结

VueRouter路由组件传参