在构建单页面应用（SPA）时，路由是不可或缺的一部分。Vue Router 是 Vue.js 官方的路由管理器，它允许我们构建嵌套路由、参数化路由以及具有动态片段的 URL。随着 Vue 3 的发布，Vue Router 也迎来了它的第4个主要版本，带来了与 Vue 3 更好的集成和一系列新特性。本篇文章将深度探索 Vue 3 与 Vue Router 4 的集成使用。
Vue Router 4 简介
Vue Router 4 是为 Vue 3 设计的路由管理器，它提供了与 Vue 3 响应式系统的无缝集成。与 Vue Router 3 相比，Vue Router 4 在性能、类型支持和易用性方面都有所提升。Vue Router 4 引入了 Composition API 的支持，使得在 Vue 3 组件中使用路由变得更加灵活和强大。
安装与配置
首先，你需要在你的 Vue 3 项目中安装 Vue Router 4。如果你正在使用 Vue CLI 或 Vite 等现代前端工具，可以通过 npm 或 yarn 来安装：
代码语言：txt复制npm install vue-router@4
# 或者
yarn add vue-router@4安装完成后，你需要配置 Vue Router。这通常包括创建路由定义、创建路由实例，并将其与 Vue 应用实例关联起来。
代码语言：txt复制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(process.env.BASE_URL),
routes,
});
export default router;然后，在你的 Vue 应用中导入并使用这个路由实例：
代码语言：txt复制import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');路由守卫
Vue Router 4 提供了导航守卫（Navigation Guards）功能，允许你在路由进入、离开或导航失败时执行逻辑。这包括全局守卫、路由独享守卫和组件内的守卫。
代码语言：txt复制router.beforeEach((to, from, next) => {
// 在路由进入前执行
// ...逻辑判断
next(); // 确保调用 next()
});
const route = {
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 路由独享守卫
// ...逻辑判断
next();
},
};
// 组件内守卫
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
next(vm => {
// 通过 `vm` 访问组件实例
});
},
// 其他组件内守卫...
};路由元信息
路由元信息（Route Meta Fields）允许你在路由记录中存储自定义信息，如标题、是否需要认证等。这些信息可以在路由守卫、组件内部或其他任何需要的地方被访问
代码语言：txt复制const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
},
// 其他路由...
];
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// 检查用户是否已认证
// ...
}
next();
});导航与编程式路由
Vue Router 提供了两种导航方式：声明式（通过 <router-link> 组件）和编程式（通过 JavaScript 代码）。编程式路由允许你在 Vue 组件的方法中调用路由导航，这在很多场景下都非常有用。
<!-- 声明式路由 -->
<router-link to="/about">Go to About</router-link>
<!-- 编程式路由 -->
<script>
export default {
methods: {
goToHome() {
this.$router.push('/');
}
}
}
</script>总结
Vue Router 4 为 Vue 3 应用提供了强大且灵活的路由管理功能。通过理解路由的配置、守卫、元信息和导航方式，你可以构建出结构清晰、易于维护的单页面应用。在未来的文章中，我们将继续探索 Vue 3 和 Vue Router 4 的其他高级特性和最佳实践。
