vue-router路由组件传参解耦

vue-router路由组件传参解耦

路由组件中使用$route取路由参数会导致该路由与该组件形成高度绑定耦合

原始取参方式

// 路由组件
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
//路由定义
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

props解耦

// 路由组件
const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const Sidebar = {
  props: ['id'],
  template: '<div>Sidebar {{ 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 }
    }
  ]
})

布尔模式

如果 props 被设置为 true，route.params 将会被被定义在组件的props中

对象模式

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

// 路由组件
const Promotion= {
  props: ['info'],
  template: '<div>Sidebar {{ info}}</div>' // 结果  111
}
//路由定义
const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { info: 111} }
  ]
})

函数模式

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

// 输入的导航路由/search/1900

// 路由组件
const SearchUser= {
  props: ['name'],
  template: '<div>SearchUser{{ name}}</div>' // 结果  2019--1900!
}
//路由定义
const router = new VueRouter({
  routes: [
    { path: '/search/:years', component: SearchUser, props: dynamicPropsFn  }
  ]
})

function dynamicPropsFn (route) {
  const now = new Date()
  return {
    name: `${now.getFullYear()}--${parseInt(route.params.years)}!`
  }
}

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

参考文档 :官方vue-router路由组件传参