vue3导航栏页面切换

在Vue3中，构建一个导航栏并实现页面间的切换通常涉及以下几个步骤：

1. **安装Vuex**：Vue3中的状态管理可以使用Vuex，它可以帮助你在应用中集中存储和管理数据，包括当前选中的菜单项。

npm install vuex

2. **创建store**：在`store/index.js`中创建Vuex store，初始化路由相关的state和mutations，例如一个数组来保存所有路由及其对应的显示状态。

import { createStore } from 'vuex'
const routes = ... // 获取路由配置

export default createStore({
  state: {
    currentRouteIndex: -1,
    routesList: routes,
  },
  mutations: {
    setRouterIndex(state, index) {
      state.currentRouteIndex = index;
    },
  },
});

3. **组件化**：将导航栏和内容页分别封装成组件。比如，创建`Header.vue`来展示导航，包含一个下拉或点击事件来更新`currentRouteIndex`。

<template>
  <div>
    <!-- 列出每个菜单项 -->
    <li v-for="(route, index) in routesList" :key="index">
      <router-link :to="route.path"
                   @click="setRouterIndex(index)"
                   :class="{ active: currentRouteIndex === index }">
        {{ route.name }}
      </router-link>
    </li>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState(['currentRouteIndex', 'routesList']),
  methods: {
    setRouterIndex(index) {
      this.$store.commit('setRouterIndex', index);
    }
  }
};
</script>

4. **路由设置**：在`router/index.js`里配置动态路由，并监听路由变化来更新Vuex状态。

import { createRouter, createWebHistory } from 'vue-router';
import store from './store';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  const index = store.state.routesList.findIndex(route => route.path === to.path);
  if (index !== -1) {
    store.commit('setRouterIndex', index);
  }
  next();
});

export default router;

现在当你在导航栏选择不同的链接时，`currentRouteIndex`会相应地改变，从而更新页面内容。