vue3第一个页面中的按钮跳转其他页面，头部组件菜单el-menu菜单高亮随之改变

在首页中，点击“查看详情”跳转“产品领域”

页面跳转功能实现，但是el-menu的菜单高亮却没有改变

解决方法：

在el-header组件中，添加：

router.afterEach(() => {

      activeIndex.value = route.path;

});

afterEach 是Vue Router其中一个全局后置守卫，它会在每次路由导航完成后被调用。

• afterEach 守卫确保在每次路由切换完成后，将当前路由的路径（route.path）赋值给 activeIndex.value。
• 这样做的目的是更新 activeIndex 的值，以便 el-menu 组件可以根据 activeIndex 的值来决定哪个菜单项应该处于高亮状态，从而反映当前活跃的页面。

这样头部组件el-menu菜单高亮就能随着路由页面的变化而改变