今天用vue+elementui做了一个面包屑导航, 记录一下实现的步骤
写在前面:
在vue路由中, $route代表的是路由信息对象, $router代表的是路由实例对象
在路由信息对象中有一个属性加matched, 里面匹配了当前页面的路由信息(是根据你的路由配置生成的), 其中有一个属性叫path(代表了当前页面的路径), 还有一个属性叫meta,是一个空对象,代表的是元信息, 因此可以在里面添加自己需要的属性
下面是实现的步骤:
第一步: html代码-基于ElementUI
<!-- 面包屑 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item // 使用v-for循环面包屑的每一项
v-for="v in breaks"
:key="v.title"
:to="{ path: v.to }"
>{
{ v.title }}
</el-breadcrumb-item>
</el-breadcrumb>
第二步: 定义循环的数组
// 数据
data() {
return {
breaks: [], // 定义一个空数组,后续通过函数计算出这个数组的数据
// 数组是一个对象数组,包含当前页路径和姓名
// 我们想要的数据格式:[{ to: '/path', title: '页面名称' }]
};
},
第三步: 配置路由 在router->index.js中配置meta
const routes = [
// 根目录重定向到登录页面
{ path: '/', redirect: '/login' },
// { path: '/', component: Home },
// 登录
{ path: '/login', component: Login },
// 后台主页
{
path: '/home',
component: Layout,
meta: { title: "后台主页" }, // meta对象原本是一个空数组.现在由于我们需要当前页的页面名
//称(用于做面包屑),所以往这个对象中添加了title属性代表当
//前页页面名, 当个页面只需要写在父路由配置中meta
children: [
{ path: '', component: Home }
]
},
// 商品管理
{
path: '/goods',
component: Layout,
redirect: '/goods/list',
meta: { title: "商品管理" }, // 多个页面需要在父路由和子路由中同时配置meta
children: [
// 多个页面需要在父路由和子路由中同时配置
{ path: '/goods/list', component: GoodsList, meta: { title: "商品列表" }, },
{ path: '/goods/add', component: GoodsAdd, meta: { title: "商品添加" }, },
{ path: '/goods/category', component: GoodsCategory, meta: { title: "商品分类" }, },
]
},
]
第四步: 计算breaks的值
//方法
methods: {
// 计算面包屑路径
calcBreaks() {
// 定义一个数组里面包含了首页的信息,首页是固定项
let temp = [{ to: "/home", title: "首页" }];
let r = this.$route.matched // $route.matched代表的是当前页面匹配的路由信息,是一个对象数组
.filter((v) => v.meta.title) // 过滤每一项的meta对象中包含title属性的元素,并装入一个新数组
.map((v) => { // 循环过滤后的数组
return { to: v.path, title: v.meta.title }; // 返回对象,并装入一个新数组,数组里面就是每一次的返回值
});
this.breaks = [...temp, ...r]; // 给数据中的breaks赋值(使用es6的扩展运算符合并数组)
},
},
第五步: 在生命周期钩子函数created中调用计算路径的函数
// 生命周期, 这个周期可以获取到data中的数据,所以写在这里面
created() {
// 执行计算面包屑路径函数
this.calcBreaks();
},
第六步: 由于生命周期中的调用只能在页面刷新后才会调用函数, 不能在页面切换时就调用计算函数,不能实现我们预期的效果, 所以需要在侦听器中再次调用
// 监听器
watch: {
// 监听路由信息对象中的path属性
"$route.path"() {
this.calcBreaks(); // 当path发生变化的时候执行关联操作调用计算函数
},
},