vue简单制作面包屑导航组件(搭配elementUi)

超级简单，直接上代码

在路由中配置mete：

{ path: '/user', meta: { title: '用户中心' }, component: resolve => require(['@/components/page/user'], resolve) }  // 配置meta

组件内容：

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>当前位置:</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item,index) in titleList" :key="index">
      <router-link :to="item.redirect||item.path">{{item.meta.title}}</router-link>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {
    titleList() {
      return (this.$route && this.$route.matched) || [] // 将matched数组返回出去 或者 返回空数组
    }
  }
}
</script>

1. this.$route.meta.title 当前页面title
2. this.$toute.matched.meta.title 当前目录+重定向页面的title