vue 自动生成面包屑导航

根据点击的导航栏自动获取相应的面包屑导航

由于我们的路由是英文的,可以在路由中定义相关信息,进行捕获就可以了


const routes: Array<RouteRecordRaw> = [// {//     path: "/",//     name:"Index",//     component:Index// }// 首页{path:'/',component:Layout,name:Layout,redirect:'/dashboard',children:[{path:'/dashboard',component:()=>import('../views/index/Dashboard.vue'),name:'Dashboard',meta:{title:'首页'}}]},// 基础数据【院系管理，专业管理，老师管理】{path: '/basic',component: Layout,name: 'Basic',meta:{title:'基础数据'},children: [{path: '/basic/faculty',component: () => import('../views/basic/Faculty.vue'),name:'Faculty',meta:{title:'院系信息'}},{path: '/basic/major',component: () => import('../views/basic/Major.vue'),name:'Major',meta:{title:'专业信息'}},{path: '/basic/teacher',component: () => import('../views/basic/Teacher.vue'),name:'Teacher',meta:{title:'教师信息'}}]},// 学生管理 【照片，信息，考试】{path: '/student',component: Layout,name: 'Student',meta:{title:'学生管理'},children: [{path: '/student/info',component: () => import('../views/student/Info.vue'),name:'Info',meta:{title:'学生信息'}},{path: '/student/exam',component: () => import('../views/student/Exam.vue'),name:'Exam',meta:{title:'考试信息'}},{path: '/student/image',component: () => import('../views/student/Image.vue'),name:'Image',meta:{title:'学生照片'}}]},// 用户信息【登录账号，角色信息，菜单管理，权限管理】{path: '/user',component: Layout,name: 'User',meta:{title:'用户角色'},children: [{path: '/user/account',component: () => import('../views/user/Account.vue'),name:'Account',meta:{title:'登录账号'}},{path: '/user/roles',component: () => import('../views/user/Roles.vue'),name:'Roles',meta:{title:'角色信息'}},{path: '/user/menu',component: () => import('../views/user/Menu.vue'),name:'Menu',meta:{title:'菜单管理'}},{path: '/user/permission',component: () => import('../views/user/Permission.vue'),name:'Permission',meta:{title:'权限管理'}}]},
]

在面包屑导航组件中获取路由信息

BredCum.vue 面包屑组件

<script lang="ts" setup>// 导入vue
import {Ref,ref,watch} from 'vue'
// 定义useRoute模块
import {RouteLocationMatched, useRoute} from "vue-router"
// 定义一个面包屑集合
const tabs:Ref<RouteLocationMatched[]>=ref([])
//获取当前路由的信息
const route = useRoute();
// 定义一个函数getBreCum
const getBredCum=()=>{// 过滤路由匹配的信息 -->route.matched 需要有meta.title let matched = route.matched.filter((item)=>item.meta && item.meta.title);// 获取matched第一条const first = matched[0]// 判断是不是首页if(first.path!=='/dashboard'){matched = [{path:'/dashboard',meta:{'title':'首页'}} as any].concat(matched)}// 拼接好的值给tabstabs.value=matched
}// 当请求的url的path变化,自动调用getBredCum
watch(()=>route.path,()=>getBredCum())</script><template><el-breadcrumb separator="/"><el-breadcrumb-item v-for="item in tabs">{{item.meta.title}}</el-breadcrumb-item></el-breadcrumb>
</template><style scoped></style>

效果

vue 自动生成面包屑导航相关推荐

Vue + ElementUI 动态生成面包屑导航教程
在Web应用程序中,面包屑导航是一种常用的导航方式,它可以帮助用户更好地理解当前页面的位置和层次关系.在Vue项目中,结合ElementUI组件库,我们可以很容易地实现一个动态生成面包屑导航的功能.本 ...
MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航原文:MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航上篇文章我们完成了动态生成多级菜单这个实用组件. 本篇 ...
【全局面包屑导航】依据路由动态生成面包屑导航
1.首先我们需要在路由中为每个vue页面设置meta属性这是为了给面包屑导航遍历路由提供依据 2.然后封装面包屑组件 3.在根组件中使用 4.效果展示 : 其他页面也切换自如成功配置啦(这里就不过多 ...
前端学习（1917）vue之电商管理系统电商系统之绘制面包屑导航和卡片视图调用api获取数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1916）vue之电商管理系统电商系统之绘制面包屑导航和卡片视图
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
vue动态面包屑导航
说明:根据不同的页面动态生成不同的面包屑导航 (不用在每个页面写死面包屑) router.js路由文件: {path:'/index',name:'index',component:()=>im ...
Laravel Breadcrumbs 自动面包屑导航
说明 laravel-breadcrumbs 可为你的 Laravel 项目快速定制拥有 Bootstrap 风格的面包屑导航. 本文章由 The EST Group 成员 @Kelvin 撰写, 首 ...
Vue面包屑导航实现方案
面包屑导航实现 1.给路由文件添加meta标签,meta的title必须和你想要展示的标题一致 {path: '/layout',component: Layout,// redirect: '/ho ...

vue 自动生成面包屑导航

vue 自动生成面包屑导航相关推荐

最新文章

热门文章