苏州建设招投标网站个人网站备案 导航

苏州建设招投标网站,个人网站备案 导航,网站外链如何建设最有用,51社社播放器文章目录Vue2 动态路由失效的根因与正确解法#xff1a;用 Vuex 管理权限路由一、问题复现#xff1a;路由加了#xff0c;页面却没变二、根因分析#xff1a;vue-router 不具备响应式能力1️⃣ addRoutes 只影响「路由匹配」2️⃣ router.options.routes 不是响应式数据三…文章目录Vue2 动态路由失效的根因与正确解法用 Vuex 管理权限路由一、问题复现路由加了页面却没变二、根因分析vue-router 不具备响应式能力1️⃣ addRoutes 只影响「路由匹配」2️⃣ router.options.routes 不是响应式数据三、正确架构菜单 Vuex 路由状态核心设计思想重点四、最小可用实现去掉项目噪音版1️⃣ permission 模块核心2️⃣ 路由守卫必须 replace3️⃣ 侧边栏只从 Vuex 读五、我在项目中踩过的几个真实坑坑 1动态 import 导致菜单不显示坑 2后端路径错误直接导致路由崩溃坑 3数据判断不严谨导致“假空数组”坑 4computed 重复定义导致菜单逻辑失效六、最终收益Vue2 动态路由失效的根因与正确解法用 Vuex 管理权限路由在 Vue2 项目中做动态路由时很多人都会遇到一个诡异问题接口已经返回了动态路由router.addRoutes()也调用了但页面菜单就是不刷新。我在实际项目中完整踩过这个坑最终总结出一个稳定、可维护、可扩展的解决方案路由只负责跳转菜单必须交给 Vuex 管理。一、问题复现路由加了页面却没变典型现象接口返回 9 个路由router.addRoutes(accessRoutes)执行成功控制台打印router.options.routes是完整的侧边栏菜单仍然只有 2 个这说明一件事路由层生效了但 UI 层完全不知道发生了变化。二、根因分析vue-router 不具备响应式能力这是 Vue2 动态路由最容易被忽略的一点1️⃣addRoutes只影响「路由匹配」router.addRoutes(accessRoutes)它只做一件事让 URL 能匹配到组件但它不会触发组件重新渲染更新侧边栏通知 Vue 进行响应式更新2️⃣router.options.routes不是响应式数据如果你的菜单是这样写的this.$router.options.routes那菜单永远不会自动刷新因为它不是 Vue data不是 Vuex stateVue 根本监听不到变化三、正确架构菜单 Vuex 路由状态核心设计思想重点后端返回菜单 / 权限 ↓ Vuex generateRoutes ↓ Vuex.state.routes ←—— 侧边栏渲染 ↓ router.addRoutes ←—— 路由跳转一句话总结vue-router 管跳转Vuex 管“展示用的路由数据”四、最小可用实现去掉项目噪音版1️⃣ permission 模块核心// store/modules/permission.js import { constantRoutes } from /router const state { routes: [], // 侧边栏使用 addRoutes: [] // 动态路由 } const mutations { SET_ROUTES(state, routes) { state.addRoutes routes state.routes constantRoutes.concat(routes) } } const actions { generateRoutes({ commit }, asyncRoutes) { commit(SET_ROUTES, asyncRoutes) return asyncRoutes } } export default { namespaced: true, state, mutations, actions }2️⃣ 路由守卫必须 replacerouter.beforeEach(async (to, from, next) { const hasToken getToken() if (!hasToken) { return next(/login) } const hasRoles store.getters.roles?.length 0 if (hasRoles) { return next() } try { await store.dispatch(user/getInfo) const accessRoutes await store.dispatch( permission/generateRoutes, asyncRoutesFromApi ) router.addRoutes(accessRoutes) // 关键重新触发导航 next({ ...to, replace: true }) } catch (e) { next(/login) } })❗ 不加replace: true新路由本次不会生效3️⃣ 侧边栏只从 Vuex 读computed: { routes() { return this.$store.state.permission.routes } } 禁止使用this.$router.options.routes五、我在项目中踩过的几个真实坑坑 1动态 import 导致菜单不显示// ❌ Vue2 场景下不稳定 component: () import(/views/${path}) // ✅ 稳定方案 component: resolve require([/views/${path}], resolve)坑 2后端路径错误直接导致路由崩溃解决方案兜底 Layoutif (!item.component || item.component Layout) { menu.component Layout }坑 3数据判断不严谨导致“假空数组”// ❌ if (res.data res.data.length 0) // ✅ if (Array.isArray(res.data) res.data.length 0)坑 4computed 重复定义导致菜单逻辑失效// ❌ 后者会覆盖前者 computed: {...} computed: {...} // ✅ computed: { ...mapGetters([]), sidebar() {} }六、最终收益采用“菜单 Vuex 路由状态”后菜单 100% 响应式动态路由稳定生效权限逻辑集中管理后端可完全控制前端菜单结构架构清晰可维护性明显提升这套方案已经在真实业务项目中长期运行适合中大型 Vue2 管理系统。