vue 路由嵌套高亮问题的解决方法

在使用 Vue 进行前端开发时，路由嵌套是非常普遍的操作。但是，很多开发者会遇到一个问题，就是当一个页面嵌套了多个子路由时，如何在导航菜单中正确地显示路由高亮状态。

为了解决这个问题，我们需要采取一些措施来处理路由嵌套和高亮状态。下面我们就来逐一讲解这些措施。

## 1、使用 router-link-active

Vue Router 提供了一个非常实用的组件 router-link-active 来处理路由高亮问题。当一个路由匹配时，router-link-active 会自动添加一个类名来高亮菜单项。

使用方法是将该组件绑定到一个路由链接上即可，例如：

<router-link to="/" v-bind:class="{ 'active': $route.path === '/' }">Home</router-link>

上面的代码中，我们使用了 class 绑定语法和 $route.path 属性来判断当前路由是否与链接匹配，如果匹配则添加 active 类名。

但是，如果嵌套的路由比较多，每个菜单项都需要添加这段代码，会显得比较冗杂。而且，在子路由中的 <router-link> 没有办法高亮父级菜单项。因此，我们需要采用更高效的方法。

## 2、使用 router.currentRoute.matched

router.currentRoute.matched 属性可以获取当前路由的所有嵌套路由信息。通过对该属性进行处理，我们可以只需要添加一次高亮指令就可以达到自动高亮的效果。

我们可以新建一个 directive 来实现这个操作：

Vue.directive('active-link', {
  bind: function(el, binding, vnode) {
    const currentPath = vnode.context.$route.path;
    const routerMeta = vnode.context.$route.matched;
    for(const meta of routerMeta) {
      const { path } = meta;
      if(currentPath.indexOf(path) === 0) {
        el.classList.add(binding.value);
      }
    }
  },
  update: function(el, { value }) {
    el.classList.remove(value);
  }
});

上面的代码中，我们先通过 currentPath 获取当前路由的路径。然后使用 router.currentRoute.mathced 来遍历所有嵌套路由信息，找到与当前路由匹配的菜单项，并添加对应的类名。最后在 update 钩子中移除类名。

这种方法相对来说要更加高效，而且能够自动高亮父级菜单项。

## 3、使用 Vue Router 自带的路由守卫

Vue Router 还提供了一种更为高效的方法来处理路由高亮，那就是使用路由守卫。通过在路由守卫中处理路由高亮的逻辑，可以使代码更加简洁而且性能更佳。

我们可以使用 beforeEach 路由守卫来实现路由高亮。在该守卫中，我们对当前路由的嵌套路由信息进行遍历，并找到与当前路由匹配的子路由，然后在导航菜单中高亮对应的菜单项。

具体的实现方法如下：

router.beforeEach((to, from, next) => {
  const { matched } = to;
  const activeRoute = matched[matched.length - 1];
  const activePath = activeRoute.path;

  // 获取导航菜单元素
  const navMenu = document.querySelector('.nav-menu');
  if(navMenu) {
    const activeLink = navMenu.querySelector('.active');
    if(activeLink) {
      activeLink.classList.remove('active');
    }
    const currentLink = navMenu.querySelector([href="${activePath}"]);
    if(currentLink) {
      currentLink.classList.add('active');
    }
  }
  next();
});

上面的代码我们使用 beforeEach 守卫来拦截每一个路由跳转，然后获取到当前路由的嵌套路由信息，找到匹配的子路由，并在导航菜单中高亮对应的菜单项。由于该方法直接操作 DOM 元素，因此需要小心使用。

以上就是几种解决路由嵌套高亮问题的方法。根据实际情况，我们可以选择其中一种或多种方法来处理路由高亮问题。总之，在处理路由嵌套时，正确地处理路由高亮是前端开发中一个非常重要的问题。