vue+element-ui面包屑导航

vue+element-ui面包屑导航

所需组件及引入文件

（npm、elelment-ui等基础安装在此不做介绍）
如同上一篇（ vue&Element-ui实现的导航菜单）中介绍，需要布局layout公共组件，路由配置文件，此篇中路由配置文件同上一篇中，在此主要介绍面包屑导航，其余可参考上一篇，链接如下

链接: vue&Element-ui实现的导航菜单链接.

组件存放内容

1、公共组件layout中引入面包屑导航组件，具体位置根据自己需要设定，面包屑导航利用element-ui中的，可事先了解

链接: Element-ui面包屑导航.
layout.vue存放内容：

2、面包屑组件BreadCrumb.vue

<template>
  <div class="breadcrumb">
      <el-breadcrumb class="app-breadcrumb" separator=">">
        <transition-group>
          <el-breadcrumb-item  v-for="item in levelList" :key="item.path">
            <a  @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
  </div>
</template>

<script>

export default{
    data(){
        return {
            levelList:null
        }
    },
    created() {
       this.getBreadList()
    },
    watch:{
        $route(){
            this.getBreadList()
        }
    },
   methods:{
      getBreadList(){
         let matched=this.$route.matched.filter(item=>item.name)//$route.matched 将会是一个包含从上到下的所有对象 (副本)。
            //  const first=matched[0]
            //  if(first && first.name !=='home'){//$route.name当前路由名称；$route.redirectedFrom重定向来源的路由的名字
            //    matched=[{ path: '/home', meta: { title: '首页' }}].concat(matched)
            //  }
             this.levelList=matched
      },
      handleLink(item) {
        const { redirect, path } = item
        if (redirect) {
          this.$router.push(redirect)
          return
        }
        this.$router.push(this.pathCompile(path))
      },
      pathCompile(path) {
        const { params } = this.$route
        var toPath = pathToRegexp.compile(path)//url 的正则表达式,快速填充 url 字符串的参数值。
        return toPath(params)
      },
      
   },
}
</script>

实现效果