vue与elementUI实现基于vue-router的路由面包屑导航条功能
1.需求描述:
- vue项目,在项目结构上通过与elementUI实现基于vue-router的路由面包屑导航条功能,这个功能的核心是vue-router,所以在前期路由文件的父子级代码一定要清晰,下面写一个demo,大家可以在此基础上根据实际情况自行拓展。
- 要实现如下的效果:
2.解决方案:
第一步:是路由文件的配置(以下是测试数据),我这边的路由文件格式及相关代码如下:
routes: [
{
path: '/',
redirect: '/Wlocame',
component: home,
meta: { title: '首页' },
name: '首页',
},
{
path: '/phone',
component: phone,
meta: { title: '手机展示' },
name: '首页',
children: [
{
path: '/test1',
component: test1,
name: '小米手机',
meta: {
title: '小米手机'
}
}
]
}
]
第二步:新建tag.vue文件(路由导航条的vue组件在需要的地方引入就好了),其中html代码如下:
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
data() {
return {
breadList: [] // 路由集合
};
},
watch: {
$route() {
this.getBreadcrumb();
}
},
methods: {
isHome(route) {
return route.name === "Home";
},
getBreadcrumb() {
let matched = this.$route.matched;
console.log(matched)
//如果不是首页
if (!this.isHome(matched[0])) {
matched = [{ path: "/Home", meta: { title: "首页" } }].concat(matched);
}
this.breadList = matched;
}
},
created() {
this.getBreadcrumb();
}
};
</script>
<style lang="scss" scoped>
</style>