vue+Element-ui实现面包屑路由导航
以下内容仅供个人学习使用
前言:
很多小伙伴想给自己的页面加上一个面包屑,优化用户体验,那么下面这部分的内容,非常适合小白练手使用~
正文开始:
- 在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
- 在aisde组件加入动态路由
- 在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);
},
- 运行效果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战