Vuetify（Vue+Laravel）路由跳转后导航栏激活链接无法自动设置问题求助

我之前也碰到过一模一样的情况！当时折腾了好一会儿才找到问题根源——v-list-item-group默认是通过自身的点击事件来更新激活状态的，但当你用this.$router.push()或者非列表项触发的router-link跳转时，它并不会自动监听路由变化来同步激活状态。

下面是我亲测有效的几种解决方案，按优雅程度排序：

1. 用计算属性绑定激活状态（推荐） #

把v-list-item-group的v-model绑定到一个基于当前路由的计算属性上，这样路由变化时激活状态会自动同步：

<template>
  <v-list-item-group v-model="activeRoute">
    <v-list-item :value="'home'">
      <router-link :to="{ name: 'home' }">首页</router-link>
    </v-list-item>
    <v-list-item :value="'documentations'">
      <router-link :to="{ name: 'documentations', params: { userId: item.id }}">文档</router-link>
    </v-list-item>
  </v-list-item-group>
</template>

<script>
export default {
  computed: {
    activeRoute() {
      // 用路由的name来匹配，前提是你的路由配置里都设置了唯一的name
      return this.$route.name;
      // 如果路由没有name，也可以用path：return this.$route.path;
    }
  }
}
</script>

关键要保证每个v-list-item的value和路由的name（或path）完全一致，这样计算属性变化时，对应的列表项就会自动激活。

2. 手动监听路由变化 #

如果计算属性的方式不适用（比如有特殊的路由匹配逻辑），可以手动监听路由跳转事件来更新激活状态：

<template>
  <v-list-item-group v-model="activeRoute">
    <!-- 列表项同上 -->
  </v-list-item-group>
</template>

<script>
export default {
  data() {
    return {
      activeRoute: this.$route.name // 初始化时匹配当前路由
    }
  },
  mounted() {
    // 监听路由跳转完成事件
    this.$router.afterEach((to) => {
      this.activeRoute = to.name;
    });
  }
}
</script>

3. 检查router-link和路由配置的一致性 #

还要确认几个细节：

• 你的路由配置中，每个页面都设置了唯一的name，并且router-link的to参数里的name和路由配置完全匹配
• 如果用path来匹配，要注意path的大小写和参数是否一致（比如带params的路径，$route.path会包含参数值，这时候用name匹配更稳妥）
• 不要随意给router-link加exact，除非你明确需要精确匹配路由（比如根路由和子路由的区分），否则可能会导致激活状态不生效

我当时就是用第一种方法解决的，把激活状态和路由name绑定后，不管是点击列表项还是用$router.push()跳转，激活状态都能正常同步了！

内容的提问来源于stack exchange，提问作者Taranis