这里写自定义目录标题
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路由组件传参