vue导航实现active

vue导航实现active的方法

在Vue中实现导航菜单的active状态，可以通过以下几种方式：

使用vue-router的router-link-active类

Vue Router会自动为当前匹配的路由链接添加router-link-active和router-link-exact-active类，只需在CSS中定义这些类的样式即可。

<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

.router-link-active {
  color: red;
  font-weight: bold;
}

自定义active类名

可以通过active-class和exact-active-class属性自定义active类名。

<router-link 
  to="/home" 
  active-class="custom-active"
  exact-active-class="custom-exact-active"
>Home</router-link>

使用编程式导航和计算属性

对于更复杂的需求，可以使用计算属性动态判断active状态。

<template>
  <nav>
    <a 
      v-for="link in links" 
      :key="link.path"
      :class="{ active: isActive(link.path) }"
      @click="navigate(link.path)"
    >
      {{ link.name }}
    </a>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      links: [
        { path: '/home', name: 'Home' },
        { path: '/about', name: 'About' }
      ]
    }
  },
  methods: {
    isActive(path) {
      return this.$route.path === path
    },
    navigate(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style>
.active {
  color: blue;
  text-decoration: underline;
}
</style>

使用第三方UI库

如果使用Element UI、Vuetify等UI库，它们通常提供内置的导航组件和active状态处理。

<el-menu :default-active="$route.path" router>
  <el-menu-item index="/home">Home</el-menu-item>
  <el-menu-item index="/about">About</el-menu-item>
</el-menu>

嵌套路由的active处理

对于嵌套路由，可以使用exact属性确保精确匹配。

<router-link to="/nested" exact>Nested</router-link>

以上方法可以根据具体项目需求选择使用，Vue Router的自动类添加是最简单直接的方式，而计算属性方式则提供了更大的灵活性。