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

超级简单,直接上代码 在路由中配置mete: { path: '/user', meta: { title: '用户中心' }, component: resolve => require(['@/components/page/user'], resolve) } // 配置meta 组件内容...

超级简单,直接上代码

在路由中配置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

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章