vue+element实现面包屑切换

vue+element实现面包屑切换
router.js 路由文件

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
// 新建四个页面
import Home from '../views/Home.vue'
const About = () => import('../views/About.vue')
const Login = () => import('../views/Login.vue')
const aboutChildren = () => import('../views/aboutChildren.vue')
Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'about',
        name: 'About',
        component: About,
        meta: {
          tiele: "关于页面",
          breadcrumb: [
            {
              path: '/',
              meta: {
                title: '首页'
              }
            },
            {
              meta: {
                title: '关于页面'
              },

            }
          ]
        },
        children: [
          {
            path: "/aboutChildren",
            component: aboutChildren,
            meta: {
              tiele: "关于的子页面",
              breadcrumb: [
                {
                  meta: {
                    title: '首页'
                  }
                },
                {
                  path: '/about',
                  meta: {
                    title: '关于页面'
                  },
                },
                {
                  meta: {
                    title: '关于的子页面'
                  },
                }
              ]
            },
          }
        ]
      },
      {
        path: 'login',
        name: 'Login',
        component: Login,
        meta: {
          tiele: "登录页面",
          breadcrumb: [
            {
              path: '/',
              meta: {
                title: '首页'
              }
            },
            {
              meta: {
                title: '登录页面'
              }
            }
          ]
        }
      }
    ]
  },
]
const router = new VueRouter({
  routes
})
export default router

App.vue文件

<template>
  <div id="app">
    <div style="margin-top: 40px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-if="routePaht">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          v-else
          v-for="(item, index) in routeBreadcrumb"
          :key="index"
          :to="item.path"
          >{{ item.meta.title }}</el-breadcrumb-item
        >
      </el-breadcrumb>
      <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
        <router-link to="/login">login</router-link>
        <router-link to="/aboutChildren">aboutChildren</router-link>
        <!-- aboutChildren -->
      </div>
    </div>
    <router-view />
  </div>
</template>
<script leng="ts">
import vue from "vue";
export default vue.extend({
  data() {
    return {};
  },
  computed: {
    routePaht() {
      if (this.$route.path === "/") return true;
    },
    routeBreadcrumb() {
      return this.$route.meta.breadcrumb;
    },
  },
});
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
a {
  margin: 30px 30px;
}
</style>