vue实现动态面包屑
写Bug的大雄 人气:0引言
后台管理系统中,经常会出现需要面包屑的情况,但是又不想每个页面都实现一个,这样不方便维护,因此封装了面包屑组件,方便在页面使用
封装组件
<!-- Breadcrumb/index.vue --> <template> <div> <el-breadcrumb class="breadcrumb" separator="/"> <transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.path"> <span v-if=" item.redirect === $route.path || index == breadList.length - 1 " > {{ item.meta.title }} </span> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> </el-breadcrumb-item> </transition-group> </el-breadcrumb> </div> </template> <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ data () { return { // 路由集合 breadList: [] as any[] }; }, methods: { // 判断是否包含首页路由 isDashboard (route: { name: string }) { const name = route && route.name; if (!name) { return false; } return route.name === 'Dashboard'; }, // 面包屑跳转 handleLink (item: { redirect: any; path: any }) { const { redirect, path } = item; redirect ? this.$router.push(redirect) : this.$router.push(path); }, // 判断当前面包屑 init () { this.breadList = []; this.$route.matched.forEach((item) => { if (item.meta.title) { this.breadList.push(item); } }); if (!this.isDashboard(this.breadList[0])) { this.breadList.unshift({ path: '/dashboard/index', meta: { title: '首页' } }); } } }, created () { this.init(); }, // 当组件放在总布局组件中,需要监听路由变化 watch: { $route () { this.init(); } } }); </script> <style lang="less" scoped> .breadcrumb-enter-active, .breadcrumb-leave-active { transition: all 0.5s; } .breadcrumb-enter, .breadcrumb-leave-active { opacity: 0; transform: translateX(20px); } .breadcrumb-move { transition: all 0.5s; } .breadcrumb-leave-active { position: absolute; } </style>
页面使用
<template> <div> <my-breadcrumb></my-breadcrumb> four </div> </template> <script lang="ts"> import Vue from 'vue'; import MyBreadcrumb from '@/components/Breadcrumb/index.vue'; export default Vue.extend({ components: { MyBreadcrumb } }); </script> <style scoped> </style>
路由文件参考
// router/index.ts import Vue from 'vue'; import VueRouter from 'vue-router'; import Login from '@/views/login/index.vue'; import Layout from '@/layout/index.vue'; Vue.use(VueRouter); /** * hidden 表示是否需要在侧边导航栏出现 ,true表示不需要 * isFirst 表示是否只有一级权限,只出现在只有一个子集,没有其他孙子集 * 当权限拥有多个子集或者孙子集,一级权限需要加上 meta * 二级权限拥有子集,也必须有 meta */ // 基础路由 export const constantRoutes = [ { path: '/redirect', component: Layout, hidden: true, children: [ { path: '/redirect/:path(.*)', component: () => import('@/views/redirect/index.vue') } ] }, { path: '/', redirect: '/dashboard', hidden: true }, { path: '/login', name: 'Login', component: Login, hidden: true }, { path: '/dashboard', component: Layout, redirect: '/dashboard/index', isFirst: true, children: [ { path: 'index', name: 'Dashboard', component: () => import('@/views/dashboard/index.vue'), meta: { title: '首页', icon: 'el-icon-location' } } ] } ]; // 动态路由 export const asyncRoutes = [ { path: '/form', component: Layout, redirect: '/form/index', isFirst: true, children: [ { path: 'index', name: 'Form', component: () => import('@/views/form/index.vue'), meta: { title: '表单', role: 'form', icon: 'el-icon-location' } } ] }, { path: '/editor', component: Layout, redirect: '/editor/index', meta: { role: 'editors', title: '总富文本', icon: 'el-icon-location' }, children: [ { path: 'index', name: 'Editor', component: () => import('@/views/editor/index.vue'), meta: { title: '富文本', role: 'editor', icon: 'el-icon-location' } }, { path: 'two', name: 'Two', redirect: '/editor/two/three', component: () => import('@/views/editor/two.vue'), meta: { title: '二级导航', role: 'two', icon: 'el-icon-location' }, children: [ { path: 'three', name: 'Three', component: () => import('@/views/editor/three.vue'), meta: { title: '三级导航', role: 'three', icon: 'el-icon-location' } }, { path: 'four', name: 'Four', component: () => import('@/views/editor/four.vue'), meta: { title: '三级导航2', role: 'four', icon: 'el-icon-location' } } ] } ] }, { path: '/tree', component: Layout, redirect: '/tree/index', isFirst: true, children: [ { path: 'index', name: 'Tree', component: () => import('@/views/tree/index.vue'), meta: { title: '树状图', role: 'tree', icon: 'el-icon-location' } } ] }, { path: '/excel', component: Layout, redirect: '/excel/index', isFirst: true, children: [ { path: 'index', name: 'Excel', component: () => import('@/views/excel/index.vue'), meta: { title: '导入导出', role: 'excel', icon: 'el-icon-location' } } ] } ]; // 出错跳转的路由 export const error = [ // 404 { path: '/404', component: () => import('@/views/error/index.vue'), hidden: true }, { path: '*', redirect: '/404', hidden: true } ]; const createRouter = () => new VueRouter({ scrollBehavior: () => ({ x: 0, y: 0 }), routes: constantRoutes }); const router = createRouter(); // 刷新路由 export function resetRouter () { const newRouter = createRouter(); (router as any).matcher = (newRouter as any).matcher; } export default router;
参考网上资料进行封装修改,具体需求可根据项目修改
加载全部内容