路由组件传参
在组件中使用$route
会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。使用props将组件和路由解耦:
const User = { template: '<div>User {{ $route.params .id }}</div>' } const routes = [ { path: '/user/:id',component : User, } ]
替换成
const User = { props: ['id'], template: '<div>User {{ id }}</div>' } const routes = [ { path: '/user/:id',component : User, props: true } ]
这样你便可以在任何地方使用该组件,使得该组件更易于重用和测试。
布尔模式
如果props
被设置为true
,route.params
将会被设置为组件props
。
命名视图
对于有命名视图的路由,你必须为每个命名视图定义props配置:
// user.vue <route-view /> <route-view name="sidebar" />
const routes = [ { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ]
对象模式
当props
是一个对象时,它将原样设置为组件props
。当props
是静态的时候很有用。
const routes = [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } ]
函数模式
你可以创建一个函数返回props
。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。
const routes = [ { path: '/search', component: SearchUser, props: route => ({query : route.query.q }) } ]
URL /search?q=vue会将{query:'vue'}
作为属性传递给SearchUser
组件。
请尽可能保持props
函数为无状态的,因为它只会在路由发生变化时起作用。如果你需要状态来定义props
,请使用包装组件,这样 Vue 才可以对状态变化做出反应。