vue-element-admin 之面包屑导航

最新推荐文章于 2023-03-07 00:05:42 发布

原创最新推荐文章于 2023-03-07 00:05:42 发布 · 6.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5 #es6 #css3

后台管理系统同时被 2 个专栏收录

3 篇文章

订阅专栏

vue elment admin

1 篇文章

订阅专栏

本文介绍了在vue-element-admin项目中遇到的面包屑导航问题，包括问题场景、问题原因及详细解决方案。通过修复路径匹配错误和补充`pathCompile`方法调用，成功解决了导致所有父级路由跳转到404页面的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-element-admin 之面包屑导航

项目适用场景：

项目在配置路由表/面包屑导航/侧边栏导航切换

描述出现的问题：

在切换的过程中在面包屑上点击子菜单的上级菜单时会进入404页面，顶级菜单会正常切换

出现问题的原因：

1.路由表地址配置错误 2.项目文件层级嵌套错误 3.path地址正则匹配出错(path-to-regexp)

解决方案如下：

1.检查项目路由表配置是否和项目文件层级一致 2./src/components/Breadcrumb/index.vue 浏览器控制台调试或者debugger

handleLink(item) {
console.log(item);
const { redirect, path } = item
if (redirect) {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 44: \dots return }̲ this.$ router.push(this.pathCompile(path))
}
完整代码如下

{{ item.meta.title }}
<a v-else @click.prevent=“handleLink(item)”>{{ item.meta.title }}

路由配置文件src/router/index.js
import Vue from ‘vue’
import Router from ‘vue-router’

Vue.use(Router)

/* Layout /
import Layout from ‘@/layout’
/*

注意: 子菜单只在路由子菜单时出现。长度> = 1
hidden: true 如果设置为true，项目将不会显示在侧栏中(默认为false)
alwaysShow: true 如果设置为true，将始终显示根菜单

                           如果不设置alwaysShow, 当项目有多个子路由时，它将成为嵌套模式，否则不显示根菜单

redirect: noRedirect 如果设置noRedirect，则不会在面包屑中重定向
name:‘router-name’ the name is used by (must set!!!)
meta : {
roles: [‘admin’,‘editor’] 控制页面角色(可以设置多个角色)
title: ‘title’ 名称显示在侧边栏和面包屑(推荐集)
icon: ‘svg-name’ 图标显示在侧栏中
breadcrumb: false 如果设置为false，则该项将隐藏在breadcrumb中(默认为true)
activeMenu: ‘/example/list’ 如果设置路径，侧栏将突出显示您设置的路径
}
/
/*
constantRoutes
没有权限要求的基本页
所有角色都可以访问
不需要动态判断权限的路由
*/
export const constantRoutes = [{
path: ‘/login’,
component: () =>
import (’@/views/login/index’),
hidden: true
},

{
path: ‘/404’,
component: () =>
import (’@/views/404’),
hidden: true
},

{
path: ‘/’,
component: Layout,
redirect: ‘/dashboard’,
breadcrumb: false,
children: [{
path: ‘dashboard’,
name: ‘统计一一一一’,
component: () =>
import (’@/views/dashboard/index’),
meta: { title: ‘统计一一一一’, icon: ‘fstj’, noCache: true },
}]
},
{
path: ‘/apabilitymanagement’,
component: Layout,
redirect: ‘/apabilitymanagement/abilitylist’,
name: ‘能力一一一一’,
children: [{
path: ‘abilitylist’,
name: ‘能力一一一一,
component: () =>
import (’@/views/apabilitymanagement/abilitylist/index’),
meta: { title: “能力一一一一”, noCache: true,icon: ‘anbility’, }
},
]
},
//能力详情共享
{
path: ‘/resourceapprovaldetail’,
component: Layout,
name: ‘能力一一一一’,
hidden: true,
children: [{
path: ‘/resourceapprovaldetail’,
name: ‘能力一一一一’,
component: () =>
import (’@/views/resourceapprovaldetail/index’),
meta: { title: “能力一一一一”, noCache: true},
hidden: true //是否显示在菜单
},
]
},
{
path: ‘/examinationmanagement’,
component: Layout,
redirect: ‘/examinationmanagement/resourceapproval’,
name: ‘审批一一一一’,
meta: { title: ‘审批一一一一, icon: ‘shenp’, noCache: true },
children: [{
path: ‘resourceapproval’,
name: ‘能力一一一一’,
component: () =>
import (’@/views/examinationmanagement/resourceapproval/index’),
meta: { title: ‘能力一一一一’, noCache: true}
},
{
path: ‘serviceapproval’,
name: ‘服务商一一一一’,
component: () =>
import (’@/views/examinationmanagement/serviceapproval/index’),
meta: { title: ‘服务商一一一一’, noCache: true }
},
{
path: ‘/serviceapprovaldetail’,
name: ‘服务商一一一一’,
component: () =>
import (’@/views/examinationmanagement/serviceapproval/serviceapprovaldetail/index’),
meta: { title: “服务商一一一一”, noCache: true, activeMenu: ‘@/views/examinationmanagement/serviceapproval/index’ },
hidden: true //是否显示在菜单
},
]
},
{
path: ‘/ordermanagement’,
component: Layout,
redirect: ‘/ordermanagement’,
name: ‘订单一一一一’,
children: [{
path: ‘/ordermanagement’,
name: ‘订单一一一一’,
component: () =>
import (’@/views/ordermanagement/index’),
meta: { title: "订单一一一一, noCache: true, icon: ‘ddgl’, }
},
{
path: ‘/refounddetail’,
name: ‘订单一一一一’,
component: () =>
import (’@/views/ordermanagement/refounddetail/index’),
meta: { title: “订单一一一一”, noCache: true, activeMenu: ‘@/views/ordermanagement/index’ },
hidden: true //是否显示在菜单
},
]
},
{
path: ‘/evaluationmanagement’,
component: Layout,
redirect: ‘/evaluationmanagement’,
name: ‘评价一一一一,
children: [{
path: ‘/evaluationmanagement’,
name: ‘评价一一一一’,
component: () =>
import (’@/views/evaluationmanagement/index’),
meta: { title: “评价一一一一”, noCache: true,icon: ‘rate’, }
},
{
path: ‘/evaluationmanagementdetail’,
name: ‘评价一一一一’,
component: () =>
import (’@/views/evaluationmanagement/evaluationmanagementdetail/index’),
meta: { title: “评价一一一一”, noCache: true, activeMenu: ‘@/views/evaluationmanagement/index’ },
hidden: true //是否显示在菜单
},
]
},
{
path: ‘/integralmanagement’,
component: Layout,
redirect: ‘/integralmanagement/pointsdistribution’,
name: ‘积分一一’,
// meta: { title: ‘积分一一’, icon: ‘yyjf’, noCache: true },
children: [{
path: ‘/pointsdistribution’,
name: ‘积分一一,
component: () =>
import (’@/views/integralmanagement/pointsdistribution/index’),
meta: { title: “积分一一”, noCache: true ,icon: ‘yyjf’}
},
{
path: ‘/pointsdistributiondetail’,
name: ‘积分一一一一’,
component: () =>
import (’@/views/integralmanagement/pointsdistribution/pointsdistributiondetail/index’),
meta: { title: “积分一一一一”, noCache: true, activeMenu: ‘@/views/integralmanagement/pointsdistribution/index’ },
hidden: true //是否显示在菜单
},
]
},
{
path: ‘/tenantedmanagements’,
component: Layout,
redirect: ‘/tenantedmanagements/tenantmanagement’,
name: ‘租户一一,
meta: { title: ‘租户一一’, icon: ‘tented’, noCache: true ,},
children: [{
path: ‘tenantmanagement’,
name: ‘租户一一,
component: () =>
import (’@/views/tenantedmanagements/tenantmanagement/index’),
meta: { title: “租户一一”, noCache: true }
},
{
path: ‘accountmanagement’,
name: ‘用户一一’,
component: () =>
import (’@/views/tenantedmanagements/accountmanagement/index’),
meta: { title: “用户一一”, noCache: true }
},
{
path: ‘accountrolemanagement’,
name: ‘角色一一’,
component: () =>
import (’@/views/tenantedmanagements/accountrolemanagement/index’),
meta: { title: “角色一一”, noCache: true }
},
{
path: ‘/accountroledetail’,
name: ‘角色一一一一,
component: () =>
import (’@/views/tenantedmanagements/accountrolemanagement/accountroledetail/index’),
meta: { title: “角色一一一一”, noCache: true, activeMenu: ‘@/views/tenantedmanagements/accountrolemanagement/index’ },
hidden: true //是否显示在菜单
},
]
},
{
path: ‘/platformservicemanagement’,
component: Layout,
redirect: ‘/platformservicemanagement’,
name: ‘服务商一一,
// meta: { title: ‘服务商一一’, icon: ‘servicep’, noCache: true },
children: [{
path: ‘/platformservicemanagement’,
name: ‘服务商一一’,
component: () =>
import (’@/views/platformservicemanagement/index’),
meta: { title: “服务商一一”, noCache: true,icon: ‘servicep’, }
}, ]
},
{
path: ‘/systemmanagementes’,
component: Layout,
redirect: ‘/systemmanagementes/platformmanagement’,
name: ‘系统一一’,
meta: { title: ‘系统一一’’, icon: ‘system’, noCache: true},
children: [
{
path: ‘platformmanagement’,
name: ‘用户一一’,
component: () =>
import (’@/views/systemmanagementes/platformmanagement/index’),
meta: { title: "用户一一, noCache: true }
},
{
path: ‘personalinformation’,
name: ‘个人一一’,
component: () =>
import (’@/views/systemmanagementes/personalinformation/index’),
meta: { title: “个人一一”, noCache: true }
},
]
},
{ path: ‘*’, redirect: ‘/404’, hidden: true }
]

const createRouter = () => new Router({
// mode: ‘history’, // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})

const router = createRouter()
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}

export default router

经过路由表的配置比对，和调试排除1.path地址正则匹配出错(path-to-regexp)，2.项目文件层级嵌套错误，路由表中一个子路由配置和
handleLink(item) {
console.log(item);
const { redirect, path } = item
if (redirect) {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 44: \dots return }̲ this.$ router.push(this.pathCompile(path)) //缺失pathCompile(path)
}
错误，导致项目中所有父级路由面包屑切换进入404页面和报错
修改后解决问题
添加链接描述```