Vue 3 路由安装、基本配置、导航操作...从入门到进阶
Vue 3 是目前前端开发中广泛使用的框架之一，而其官方路由库 Vue Router 更是开发单页面应用（SPA）时不可或缺的工具。Vue Router 让开发者可以通过 URL 控制视图的切换，提升应用的用户体验。本篇文章将带你全面掌握 Vue 3 路由的安装、基本配置、导航操作、嵌套路由、路由守卫等内容，帮助你快速上手并灵活应用 Vue Router。
一、Vue Router 简介
Vue Router 是 Vue 官方推荐的路由库，为 Vue 应用提供视图间的导航管理。它的主要功能有：
- 多页面跳转：在单页面应用中模拟多页面的导航，允许用户通过不同的 URL 访问不同的视图。
- 嵌套路由：支持页面内部的多层次结构，适用于复杂的页面布局。
- 路由守卫：帮助在页面跳转时控制用户权限。
- 懒加载：按需加载组件，提升页面加载速度。
二、安装 Vue Router
在 Vue 3 中，Vue Router 是一个独立的包，需要手动安装：
npm install vue-router@4
或使用 yarn 安装：
yarn add vue-router@4
三、配置基础路由
1. 创建路由文件
首先，我们在 src/router 文件夹下创建一个 index.js 文件用于管理路由。我们将使用 createRouter 和 createWebHistory 创建路由实例，并定义各个路由的路径及其对应的组件。
// 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(import.meta.env.BASE_URL),
routes,
});
export default router;
2. 将路由实例注入到应用
在 src/main.js 中引入并使用路由，使整个应用可以识别路由配置：
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
3. 在组件中使用 <router-view> 进行渲染
在根组件（通常为 App.vue）中添加 <router-view> 组件，用于渲染匹配到的路由组件：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
四、路由导航的多种方式
Vue Router 提供了多种方式在页面间导航，包括 <router-link> 组件和编程式导航。
1. 使用 <router-link> 进行导航
<router-link> 是 Vue Router 提供的导航标签，可以通过 to 属性指定目标路径，实现页面跳转：
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>
2. 使用编程式导航
如果需要在方法中跳转到某个页面，可以使用 this.$router.push() 进行编程式导航。
// 在方法中跳转到 /about 页面
this.$router.push('/about');
如果需要传递参数或替换当前路由（不添加到历史记录），也可以使用更灵活的 router.push() 或 router.replace() 方法：
this.$router.push({ name: 'About', params: { userId: 123 } });
this.$router.replace('/about');
五、嵌套路由与多层视图
Vue Router 支持嵌套路由，使得页面可以拥有子路由。在配置路由时，可以通过在 routes 中添加 children 属性来实现嵌套。
配置嵌套路由
const routes = [
{
path: '/',
component: Home,
children: [
{
path: 'profile', // 会匹配 /profile
component: () => import('../views/Profile.vue'),
},
{
path: 'settings', // 会匹配 /settings
component: () => import('../views/Settings.vue'),
},
],
},
];
在 Home 组件中需要使用 <router-view> 渲染子路由内容：
<template>
<div>
<h1>Home Page</h1>
<router-view></router-view>
</div>
</template>
通过嵌套路由，访问 /profile 或 /settings 时会显示对应的子组件内容。
六、路由守卫与权限控制
路由守卫可以在路由跳转之前执行一些逻辑，例如验证用户是否登录。
全局守卫
全局前置守卫会在每次路由跳转前执行：
router.beforeEach((to, from, next) => {
if (to.path !== '/login' && !userIsAuthenticated()) {
next('/login'); // 未认证用户跳转到登录页面
} else {
next(); // 允许跳转
}
});
路由独享守卫
路由独享守卫是在路由配置中定义的守卫：
const routes = [
{
path: '/profile',
component: Profile,
beforeEnter: (to, from, next) => {
if (!isLoggedIn()) next('/login');
else next();
},
},
];
组件内守卫
组件内守卫定义在组件内部，如 beforeRouteEnter 和 beforeRouteLeave：
export default {
beforeRouteEnter(to, from, next) {
console.log('Entering the route');
next();
},
beforeRouteLeave(to, from, next) {
console.log('Leaving the route');
next();
},
};
七、路由懒加载与性能优化
Vue Router 支持懒加载组件，这样路由组件会在实际访问时才加载，减少首屏加载的大小，提高应用性能。通过 import() 可以实现懒加载：
const routes = [
{
path: '/about',
component: () => import('../views/About.vue'), // 懒加载
},
];
这种方式会在首次访问 /about 时才加载 About.vue，从而减少初次加载时间。
八、动态路由和传参
Vue Router 支持动态路由，即在路径中包含动态参数。我们可以在路径中使用 :参数名 的方式来定义参数。例如：
const routes = [
{
path: '/user/:id',
name: 'User',
component: () => import('../views/User.vue'),
},
];
在 User 组件中，可以通过 this.$route.params.id 获取动态参数 id：
export default {
mounted() {
const userId = this.$route.params.id;
console.log('User ID:', userId);
},
};
如果需要在编程式导航中传递参数，可以通过 params 进行传递：
this.$router.push({ name: 'User', params: { id: 123 } });
九、总结
本文介绍了 Vue 3 路由的安装、基本配置、导航操作、嵌套路由、路由守卫等内容。Vue Router 是 Vue.js 应用中实现视图间导航的重要工具，掌握它的各种功能可以帮助我们构建功能丰富、用户体验良好的单页面应用。希望这篇文章能帮助你更好地理解 Vue Router，并在实际项目中高效使用它。
来源：编码时光机
