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

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

image

  1. 在Header组件使用

image

     <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);
  },

image

  1. 运行效果:

image

posted @   Amyel  阅读(1853)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
  1. 1 原来你也在这里 周笔畅
  2. 2 世间美好与你环环相扣 柏松
  3. 3 起风了 吴青峰
  4. 4 极恶都市 夏日入侵企划
极恶都市 - 夏日入侵企划
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 王星

作曲 : 灰鸿啊/皮皮

编曲 : 夏日入侵企画

制作人 : 邢硕

节奏吉他 : 肯尼

主音吉他 : 张伟楠

贝斯 : 皮皮

鼓 : 海鑫

和声 : 邢硕

音效制作 : 邢硕

录音 : 邢硕/夏国兴

混音 : 于昊

特别鸣谢 : 张伟楠

这城市的车流和这地表的颤抖

像一颗石子落入地心之后泛起的温柔

暗涌

河水流过转角她的楼

被梦魇

轻声呓语唤醒身后的幼兽

失效感官焦灼只剩下

麻木愚钝无从感受

共同支撑全都瓦解

只是我们现在都

已忘记到底是

谁隐藏春秋

谁在大雨之后

把旗帜插在最高的楼

过去陈旧的还在坚守

内心已腐朽

摇摇欲坠不停退后

毁灭即拯救

夏日掠夺春秋

结局无法看透

眼看这情节开始变旧

所有的城池已失守

最终无法占有

无眠辗转

伴着人间破碎的旧梦

像繁星

退却后只剩下混沌的夜空

炙热

掩盖风声鹤唳的担忧

把所有失落无助反手推入

无尽的白昼

失效感官焦灼只剩下

麻木愚钝无从感受

共同支撑全都瓦解

只是我们现在都已经忘记到底是

谁隐藏春秋

谁在大雨之后

把旗帜插在最高的楼

过去的陈旧还在坚守

内心已腐朽

摇摇欲坠不停退后

毁灭即拯救

夏日掠夺春秋

结局无法看透

眼看这情节开始变旧

所有的城池早已失守

惶恐难以接受

缠绵往复不肯放手

最终无法占有

谁隐藏春秋

谁在大雨之后

把旗帜插在最高的楼

过去的陈旧还在坚守

内心已腐朽

摇摇欲坠不停退后

毁 灭 即 拯 救

谁掠夺春秋

谁在大雨之后

把旗帜插在最高的楼

过去的陈旧还在坚守

内心已腐朽

摇摇欲坠不停退后

毁灭即拯救

夏日掠夺春秋

结局无法看透

明知城池已失守

缠绵往复不肯放手

最终无法占有

点击右上角即可分享
微信分享提示