vue+Element-ui实现面包屑路由导航

以下内容仅供个人学习使用

前言:
很多小伙伴想给自己的页面加上一个面包屑，优化用户体验，那么下面这部分的内容，非常适合小白练手使用~

正文开始:

1. 在router/index.js里面加上meta

import store from '@/store'
import Vue from 'vue'
import VueRouter from 'vue-router'
const Manage = () => import('../views/Manage/index')
const User = () => import('../views/User/index')
const Home = () => import('../views/Home/index')
const Permissions = () => import('../views/Permissions/index')
const System = () => import('../views/System/index')
const test1 = () => import('../views/test1/index')
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Manage',
    component: Manage,
    redirect: '/home',
    children: [
      {
        path: '/Home',
        name: 'Home',
        component: Home,
        meta: {
          title: ''
        }
      },
      {
        path: '/User',
        name: 'User',
        component: User,
        meta: {
          title: '用户管理'
        }

      },
      {
        path: '/Permissions',
        name: 'Permissions',
        component: Permissions,
        meta: {
          title: '权限管理'
        }
      },
      {
        path: '/System',
        name: 'System',
        component: System,
        meta: {
          title: '系统管理'
        }
      },
      {
        path: '/test1',
        name: 'test1',
        component: test1,
        meta: {
          title: '测试专用'
        }
      },
    ]

  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2. 在aisde组件加入动态路由

3. 在Header组件使用

     <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="'/home'">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{this.$route.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>

小白不懂this.$route.meta.title的话可以在aisde页面打印一下

  created () {
    console.log(this.$route);
  },

4. 运行效果: