如何在 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 逻辑。