vue与elementUI实现基于vue-router的路由面包屑导航条功能

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>