<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in list" :key="item.path">
      <router-link :to="item.path">{{item.meta.title}}</router-link>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script>
export default {
  computed: { list: (vm) => vm.$route.matched }
}
</script>

<template>
  <div>
    <h1>首页</h1>
    <router-view></router-view>
  </div>
</template>

<template>
  <div>
    <h1>活动管理</h1>
    <router-view></router-view>
  </div>
</template>

<template>
  <h1>活动列表</h1>
</template>

<template>
  <h1>测试</h1>
</template>

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)

import Home from ‘@/components/Home‘
import Manage from ‘@/components/Manage‘
import List from ‘@/components/List‘
import Test from ‘@/components/Test‘

const routes = [
  {
    path: ‘/‘,
    redirect: ‘/home‘
  },
  {
    path: ‘/home‘,
    name: ‘Home‘,
    component: Home,
    meta: { title: ‘首页‘ },
    children: [
      {
        path: ‘manage‘,
        name: ‘Manage‘,
        component: Manage,
        meta: { title: ‘活动管理‘ },
        children: [
          {
            path: ‘list‘,
            name: ‘List‘,
            component: List,
            meta: { title: ‘活动列表‘ }
          },
          {
            path: ‘test‘,
            name: ‘Test‘,
            component: Test,
            meta: { title: ‘测试‘ }
          }
        ]
      }
    ]
  }
]
const router = new VueRouter({
  mode: ‘history‘,
  routes
})

export default router

<template>
  <div id="app">
    <BreadCrumb />
    <router-view></router-view>
  </div>
</template>
<script>
import BreadCrumb from ‘@components/BreadCrumb‘
export default {
  components: { BreadCrumb }
}
</script>