如何在Vue3中使用VueRouter和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 mit('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 mit('increment'); }; const decrement = () => { store mit('decrement'); }; const incrementAsync = () => { store.dispatch('incrementAsync'); }; </script> <style scoped> /* 样式 */ </style>

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