vue-router路由组件传参解耦
这里写自定义目录标题
- vue-router路由组件传参解耦
- 布尔模式
- 对象模式
- 函数模式
vue-router路由组件传参解耦
路由组件中使用$route取路由参数会导致该路由与该组件形成高度绑定耦合
原始取参方式
// 路由组件
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 Sidebar = {
props: ['id'],
template: 'Sidebar {{ 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 }
}
]
})
布尔模式
如果 props 被设置为 true，route.params 将会被被定义在组件的props中
对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
// 路由组件
const Promotion= {
props: ['info'],
template: 'Sidebar {{ info}}' // 结果 111
}
//路由定义
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { info: 111} }
]
})
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等
// 输入的导航路由/search/1900
// 路由组件
const SearchUser= {
props: ['name'],
template: 'SearchUser{{ name}}' // 结果 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)}!`
}
}