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>