如何在 Vue 3 中使用 Vue Router 和 Vuex

在 Vue 3 中使用 Vue Router

1. 安装 Vue Router

在项目根目录下，通过 npm 或 yarn 安装 Vue Router 4（适用于 Vue 3）：

npm install vue-router@4
# 或者使用 yarn
yarn add vue-router@4

2. 创建路由配置文件

在 src 目录下创建一个 router 文件夹，并在其中创建 index.js 文件，用于配置路由：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'; // 假设 Home 组件在 views 文件夹下
import About from '../views/About.vue'; // 假设 About 组件在 views 文件夹下

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

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

export default router;

3. 在主应用中使用路由

在 main.js 中引入并使用路由：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

4. 在模板中使用路由

在 App.vue 中添加路由出口和导航链接：

<template>
  <div>
    <!-- 导航链接 -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <!-- 路由出口，用于显示当前路由对应的组件 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
// 这里可以添加其他逻辑
</script>

<style scoped>
/* 样式 */
</style>

5. 路由导航守卫（可选）

可以使用路由导航守卫来控制路由的访问权限等，例如在 router/index.js 中添加全局前置守卫：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

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

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

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 可以在这里添加权限验证等逻辑
  console.log('Before each navigation');
  next();
});

export default router;

在 Vue 3 中使用 Vuex（Vuex 4 适用于 Vue 3）

1. 安装 Vuex

在项目根目录下，通过 npm 或 yarn 安装 Vuex 4：

npm install vuex@4
# 或者使用 yarn
yarn add vuex@4

2. 创建 store

在 src 目录下创建一个 store 文件夹，并在其中创建 index.js 文件，用于创建和配置 store：

// src/store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

3. 在主应用中使用 store

在 main.js 中引入并使用 store：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

4. 在组件中使用 store

在组件中可以通过不同方式使用 store 中的状态、mutations、actions 和 getters：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();

const count = store.state.count;
const doubleCount = store.getters.doubleCount;

const increment = () => {
  store.commit('increment');
};

const decrement = () => {
  store.commit('decrement');
};

const incrementAsync = () => {
  store.dispatch('incrementAsync');
};
</script>

<style scoped>
/* 样式 */
</style>

通过以上步骤，你就可以在 Vue 3 项目中成功使用 Vue Router 和 Vuex 了。在实际开发中，你可以根据项目需求进一步扩展和优化路由配置和 store 逻辑。