Vue：使用 element-ui 实现一个简易的面包屑

面包屑组件不但可以帮助用户确定当前页面的位置，也可以轻易地返回上一级或上几级页面菜单。

1、路由配置

const routes = [
  {
    path: "/home",
    name: "home",
    component: Home,
    meta: {
      title: "首页",
    },
    children: [
      {
        path: "list",
        name: "list",
        component: List,
        meta: {
          title: "列表页",
        },
        children: [
          {
            path: "details",
            name: "details",
            component: Details,
            meta: {
              title: "详情页",
            },
          },
        ],
      },
    ],
  },
];

2、在 main.js 中引入并使用 element-ui

import Vue from "vue";
import ElementUi from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUi);

3、APP.vue 中的逻辑代码

<template>
  <div id="app">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item,index) in itemList"
                          :to="{ path:item.path }"
                          :key="index">{{ item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
    <router-view />
  </div>
</template>

<script>
export default {
  // 如果将数据存放到data中，后退时itemList不会更新，面包屑组件也不会重新渲染。
  computed: {
    itemList() {
      return this.$route.matched
    }
  }
}
</script>

4、页面效果