面包屑导航的实现
记录下做面包屑导航的思路
1. 更改路由，给路由配置meta属性添加对象
{path: '/store', meta: { title: '店铺管理' }, component: () => import('@/views/home/Layerout.vue’)}
2. 封装函数，获取路径和名字
- 准备一个变量用来装路径和导航名字
navArr: [] //面包屑导航所需数组
- 封装渲染面包屑导航函数
renderHead() {
// 筛选出具有meta属性的路由
let arr = this.$route.matched.filter(v => v.meta.title);
// 将获取的数组转换为所需数组，给navArr赋值
this.navArr = arr.map(v => {
return { name: v.meta.title, path: v.path };
});
}
3. 标签根据navArr数组来渲染
- 使用v-for渲染，有多少元素就创建多少标签。
<el-breadcrumb-item v-for="(v, i) in navArr" :key="i" :to="v.path">{{ v.name }}</el-breadcrumb-item>
4. 调用
- 路径发生改变时渲染面包屑导航
watch: {
// 路径改变时渲染面包屑。
"$route.path"() {
this.renderHead();
}
}
- 创建页面时渲染
created() {
// 创建时渲染面包屑
this.renderHead();
},