diff --git a/src/components/MobileBottomNav/index.vue b/src/components/MobileBottomNav/index.vue
index dc0a270..a876201 100644
--- a/src/components/MobileBottomNav/index.vue
+++ b/src/components/MobileBottomNav/index.vue
@@ -34,48 +34,166 @@ export default {
default: true
}
},
+ data() {
+ return {
+ navItemsCache: null
+ }
+ },
computed: {
- ...mapGetters(['device']),
+ ...mapGetters(['device', 'sidebarRouters']),
isMobile() {
return this.device === 'mobile' || window.innerWidth < 768
},
navItems() {
+ // 如果提供了自定义items,直接使用
if (this.items && this.items.length > 0) {
return this.items
}
- // 默认导航项 - 从路由中获取
- const routes = this.$store?.state?.permission?.routes || []
- const mainRoutes = routes.filter(route => route.meta && route.meta.title && !route.hidden)
- if (mainRoutes.length > 0) {
- return mainRoutes.slice(0, 5).map(route => ({
- path: route.path,
- label: route.meta.title,
- icon: route.meta.icon || 'el-icon-menu',
- iconClass: route.meta.icon
- }))
+ // 使用缓存,避免重复计算
+ if (this.navItemsCache) {
+ return this.navItemsCache
}
- // 如果没有路由,返回默认导航
- return [
+ // 从侧边栏路由中获取可用的路由
+ const routes = this.sidebarRouters || []
+
+ // 扁平化路由,获取所有叶子节点路由
+ const flattenRoutes = (routes, parentPath = '') => {
+ let result = []
+ if (!routes || !Array.isArray(routes)) {
+ return result
+ }
+
+ routes.forEach(route => {
+ if (route.hidden) return
+
+ // 处理路径 - 确保路径正确
+ let fullPath = route.path || ''
+ if (parentPath) {
+ if (fullPath.startsWith('/')) {
+ fullPath = fullPath
+ } else {
+ // 合并路径
+ const basePath = parentPath.endsWith('/') ? parentPath.slice(0, -1) : parentPath
+ fullPath = `${basePath}/${fullPath}`.replace(/\/+/g, '/')
+ }
+ }
+
+ // 确保路径以/开头
+ if (fullPath && !fullPath.startsWith('/')) {
+ fullPath = '/' + fullPath
+ }
+
+ // 如果有子路由,递归处理
+ if (route.children && route.children.length > 0) {
+ result = result.concat(flattenRoutes(route.children, fullPath))
+ } else {
+ // 叶子节点路由,且有meta信息
+ if (route.meta && route.meta.title && fullPath) {
+ result.push({
+ path: fullPath,
+ label: route.meta.title,
+ icon: route.meta.icon || 'el-icon-menu',
+ iconClass: route.meta.icon,
+ route: route
+ })
+ }
+ }
+ })
+ return result
+ }
+
+ const flatRoutes = flattenRoutes(routes)
+
+ // 过滤并选择前5个主要路由
+ const mainRoutes = flatRoutes
+ .filter(route => {
+ // 过滤掉一些特殊路由
+ const excludePaths = ['/redirect', '/login', '/register', '/404', '/401', '/user/profile']
+ const path = route.path || ''
+ return path &&
+ path !== '/' &&
+ !excludePaths.some(exclude => path.includes(exclude)) &&
+ !path.startsWith('/user/')
+ })
+ .slice(0, 5)
+
+ // 缓存结果
+ if (mainRoutes.length > 0) {
+ this.navItemsCache = mainRoutes
+ return mainRoutes
+ }
+
+ // 如果没有找到路由,返回默认导航
+ const defaultRoutes = [
{
- path: '/index',
+ path: '/sloworder/index',
label: '首页',
icon: 'el-icon-s-home'
}
]
+
+ this.navItemsCache = defaultRoutes
+ return defaultRoutes
}
},
+ watch: {
+ sidebarRouters: {
+ handler() {
+ // 路由变化时清除缓存
+ this.navItemsCache = null
+ },
+ deep: true
+ }
+ },
+ mounted() {
+ // 等待路由加载完成
+ this.$nextTick(() => {
+ // 延迟一下,确保路由已经加载
+ setTimeout(() => {
+ this.navItemsCache = null
+ this.$forceUpdate()
+ }, 500)
+ })
+ },
methods: {
isActive(path) {
- return this.$route.path.startsWith(path)
+ if (!path) return false
+ const currentPath = this.$route.path
+ return currentPath === path || currentPath.startsWith(path + '/')
},
handleNavClick(item) {
if (item.handler) {
item.handler()
- } else if (item.path) {
- this.$router.push(item.path)
+ this.$emit('nav-click', item)
+ return
}
+
+ if (item.path) {
+ // 确保路径正确
+ let path = item.path
+ if (!path.startsWith('/')) {
+ path = `/${path}`
+ }
+
+ // 移除末尾的斜杠(除了根路径)
+ if (path !== '/' && path.endsWith('/')) {
+ path = path.slice(0, -1)
+ }
+
+ // 尝试导航
+ this.$router.push(path).catch(err => {
+ // 如果push失败,尝试replace
+ if (err.name !== 'NavigationDuplicated') {
+ this.$router.replace(path).catch(() => {
+ console.error('Navigation to', path, 'failed')
+ // 不显示错误消息,避免打扰用户
+ })
+ }
+ })
+ }
+
this.$emit('nav-click', item)
}
}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 2ae9413..5d9cb20 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -11,7 +11,10 @@
-
+
@@ -42,6 +45,11 @@ export default {
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
}),
+ mobileNavItems() {
+ // 可以从配置或store中获取,也可以自定义
+ // 如果返回空数组,组件会使用默认逻辑
+ return []
+ },
classObj() {
return {
hideSidebar: !this.sidebar.opened,