多列表共用详情页时菜单高亮问题

本节目标：理解“多列表共用详情页时菜单高亮问题”的核心思路，并能把它用于实际开发或面试表达。 如果您可以保证每个路由都有一个code，那么我们可以根据这个code来实现菜单项的高亮。这里是一个完整的方案：

1. 调整路由配置 在路由的meta中添加一个indices数组，这个数组包含所有可能跳转到该详情页的列表页面的codes。 javascript Copy code { path: '/planningAndConstruction/projectManagement/projectManagementOperation/:id/:Opstatus', name: 'projectManagementOperation', component: () => import( '@/views/planningAndConstruction/projectManagement/projectManagement/projectManagementOperation' ), meta: { auth: true, indices: ['3-2-1', '3-2-2', '3-2-3'], // 所有可能的列表页面codes }, }
2. 使用全局路由守卫处理高亮逻辑 在您的全局路由守卫中，根据from.meta.index和to.meta.indices来确定菜单的高亮项。 javascript Copy code router.beforeEach((to, from, next) => { let newIndex = to.meta.index; if (to.meta.indices && to.meta.indices.includes(from.meta.index)) { // 来自受支持的列表页面 newIndex = from.meta.index; } else if (to.meta.indices && !to.meta.indices.includes(from.meta.index)) { // 来自其他页面，比如详情跳转到详情 newIndex = to.meta.indices[0]; // 可以选择一个默认的index，或者保持不变 } // 设置新的激活菜单index store.commit('setActiveMenuIndex', newIndex); next(); // 确保调用next()，否则页面不会导航到新的路由 }); 在您的Vuex store中，更新setActiveMenuIndex mutation来反映新的激活菜单项。 javascript Copy code // Vuex store中的mutations mutations: { setActiveMenuIndex(state, newIndex) { state.activeMenuIndex = newIndex; }, // ... 其他 mutations }
3. 更新MenuSide组件以反映当前激活的菜单项 在MenuSide组件的computed属性中，绑定激活的菜单项到Vuex中的状态。 javascript Copy code computed: { ...mapState('p8app/menu', ['aside']), activeIndex() { // 直接从Vuex状态中获取当前激活的菜单项code return this.$store.state.activeMenuIndex; }, }, 注意事项 确保在跳转到详情页面时，如果有列表页面的code不在indices数组中，可以通过备用策略处理。这样一来，当用户从一个不同的详情页面跳转时，你可以设置一个默认的高亮项或者根据具体情况保持当前的高亮状态。 此外，如果用户直接通过URL访问详情页面（没有from路由），你可能需要设置一个合理的默认值来表示默认的高亮菜单项。 通过以上步骤，无论用户是从列表页面跳转还是直接访问详情页面，或者是从不同的详情页面互相跳转，都能够保持正确的菜单项高亮。