vue实现导航联动

Vue 实现导航联动的方法

使用 Vue Router 实现导航联动

安装 Vue Router 并配置路由表，通过 router-link 组件实现导航跳转。在路由配置中定义路径和对应的组件，利用 active-class 属性高亮当前选中的导航项。

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

export default router

<!-- App.vue -->
<template>
  <div>
    <router-link to="/" exact-active-class="active">Home</router-link>
    <router-link to="/about" active-class="active">About</router-link>
    <router-view></router-view>
  </div>
</template>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

使用动态组件实现导航联动

通过动态组件和 v-bind:is 实现导航切换，利用 v-for 循环渲染导航项，点击时切换当前显示的组件。

<template>
  <div>
    <nav>
      <button 
        v-for="tab in tabs" 
        :key="tab" 
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab }}
      </button>
    </nav>
    <component :is="currentTabComponent"></component>
  </div>
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'

export default {
  data() {
    return {
      tabs: ['Home', 'About'],
      currentTab: 'Home'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab.toLowerCase()
    }
  },
  components: {
    home: Home,
    about: About
  }
}
</script>

使用事件总线实现跨组件导航联动

通过事件总线（Event Bus）实现非父子组件间的通信，在一个组件中触发事件，在另一个组件中监听并响应。

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

<!-- NavBar.vue -->
<template>
  <div>
    <button @click="navigateTo('home')">Home</button>
    <button @click="navigateTo('about')">About</button>
  </div>
</template>

<script>
import { EventBus } from './event-bus.js'

export default {
  methods: {
    navigateTo(page) {
      EventBus.$emit('navigate', page)
    }
  }
}
</script>

<!-- ContentArea.vue -->
<template>
  <div>
    <component :is="currentPage"></component>
  </div>
</template>

<script>
import { EventBus } from './event-bus.js'
import Home from './Home.vue'
import About from './About.vue'

export default {
  data() {
    return {
      currentPage: 'home'
    }
  },
  created() {
    EventBus.$on('navigate', (page) => {
      this.currentPage = page
    })
  },
  components: {
    home: Home,
    about: About
  }
}
</script>

使用 Vuex 管理导航状态

通过 Vuex 集中管理导航状态，组件通过 mapState 和 mapMutations 访问和修改状态。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentPage: 'home'
  },
  mutations: {
    setCurrentPage(state, page) {
      state.currentPage = page
    }
  }
})

<!-- NavBar.vue -->
<template>
  <div>
    <button @click="setCurrentPage('home')">Home</button>
    <button @click="setCurrentPage('about')">About</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['setCurrentPage'])
  }
}
</script>

<!-- ContentArea.vue -->
<template>
  <div>
    <component :is="currentPage"></component>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Home from './Home.vue'
import About from './About.vue'

export default {
  computed: {
    ...mapState(['currentPage'])
  },
  components: {
    home: Home,
    about: About
  }
}
</script>

响应式导航联动

结合 watch 或 computed 属性实现导航联动效果，根据路由变化或状态变化动态更新导航样式或内容。

<template>
  <div>
    <button 
      v-for="tab in tabs" 
      :key="tab" 
      @click="changeTab(tab)"
      :class="{ active: isActive(tab) }"
    >
      {{ tab }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['home', 'about'],
      currentTab: 'home'
    }
  },
  methods: {
    changeTab(tab) {
      this.currentTab = tab
    },
    isActive(tab) {
      return this.currentTab === tab
    }
  }
}
</script>

这些方法可以根据具体需求选择使用，Vue Router 适合页面级导航，动态组件适合单页面内的导航切换，事件总线和 Vuex 适合复杂状态管理场景。