router/index.js
const routes = [
{
path: '/',
component: login
},
{
path: '/manage',
component: manage,
name: '',
children: [{
path: '/adminSet',
component: adminSet,
meta: ['设置', '管理员设置'],
},{
path: '/sendMessage',
component: sendMessage,
meta: ['设置', '发送通知'],
},{
path: '/explain',
component: explain,
meta: ['说明', '说明'],
}]
}
]
export default new Router({
routes,
strict: process.env.NODE_ENV !== 'production',
})
场景一:写在template元素里:$route.meta
$route.meta 取到 当前路由的meta内容 例如:['添加数据', '添加商铺']
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in $route.meta" key="index">{{item}}
</el-breadcrumb-item>
</el-breadcrumb>
场景二:在js里获取:this.$route.meta
例如:
mounted(){
console.log("路由---",this.$route.meta)
}
本文详细介绍了在Vue项目中如何利用路由的meta属性来增强页面导航功能,通过具体代码示例展示了如何在模板和JS中获取和使用路由的meta信息,实现面包屑导航等实用功能。

1691

被折叠的 条评论
为什么被折叠?



