在Vue3中，`router`和`store`是两个核心组件，它们分别是路由管理和状态管理的解决方案。Vue Router是官方的路由库，用于处理页面间的导航和数据传递；Vuex则是状态管理工具，用于集中管理组件间的共享状态。在本教程中，我们将深入探讨这两个组件在Vue3中的详细使用方法，以及与`vue`和`route`的结合。
**Vue Router 3.x 在Vue3中的使用**
Vue Router 3.x 已经支持Vue3，引入方式与Vue2有所不同。需要通过npm安装：
```bash
npm install vue-router@next
```
在主文件`main.js`中，你需要导入Vue3和Vue Router，并创建一个路由器实例：
```javascript
import { createApp } from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
// 注册Vue Router
const app = createApp(App)
app.use(VueRouter)
// 定义路由
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// 创建路由器实例
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 挂载到Vue实例
app.use(router)
app.mount('#app')
```
Vue Router 提供了动态路由、命名路由、嵌套路由等特性。例如，动态路由可以这样定义：
```javascript
{ path: '/user/:id', component: User }
```
**Vuex 4.x 在Vue3中的使用**
Vuex 4.x 也支持Vue3，安装方式如下：
```bash
npm install vuex@next
```
在`main.js`中，我们需要创建一个Vuex store实例：
```javascript
import { createApp } from 'vue'
import Vuex from 'vuex'
import store from './store' // 引入store模块
const app = createApp(App)
app.use(Vuex, store) // 注意这里的用法变化，Vue3中使用第二个参数传入store
app.mount('#app')
```
在`store.js`中，你可以定义state、mutations、actions和getters：
```javascript
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
asyncIncrement({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
},
getters: {
doubleCount(state) {
return state.count * 2
}
}
})
```
Vue3中，可以直接通过`setup`函数访问store：
```javascript
import { useStore } from 'vuex'
export default {
setup() {
const store = useStore()
console.log(store.state.count)
}
}
```
**Vue3与Vuex Router的结合**
Vue3中，可以使用`vue-router`的`beforeEach`导航守卫来实现权限控制。同时，Vuex可以用来存储用户信息，以判断用户是否已登录：
```javascript
router.beforeEach((to, from, next) => {
if (store.getters.isLoggedIn) {
next()
} else {
next('/login') // 未登录重定向到登录页
}
})
```
此外，你还可以在`route`的元信息中定义需要的状态，然后在`beforeEnter`中使用`store`进行验证：
```javascript
const routes = [
{
path: '/protected',
component: Protected,
meta: { requiresAuth: true },
beforeEnter(to, from, next) {
if (store.getters.isLoggedIn) {
next()
} else {
next('/login')
}
}
}
]
```
通过上述内容，我们可以了解到Vue3中如何使用`router`和`store`进行路由管理和状态管理。Vue Router提供了丰富的路由配置和导航功能，而Vuex则帮助我们更好地管理应用的状态。将这两者结合使用，可以构建出高效、可维护的大型Vue3应用。
