Vue 路由是构建单页面应用(SPA)的核心功能,主要通过 Vue Router 实现。以下是 Vue Router 的详细讲解,涵盖核心概念、用法和最佳实践。
一、Vue Router 核心概念
1. 路由的作用
SPA 页面切换:在不刷新页面的情况下动态加载不同组件。
URL 与组件映射:通过 URL 路径匹配对应的组件。
导航守卫:控制路由跳转的权限和逻辑。
路由参数传递:通过 URL 或路由对象传递数据。
二、快速上手 Vue Router
1. 安装
npm install vue-router@4 # Vue 3 使用 vue-router 4.x
2. 基础配置
在 src/router/index.js 中创建路由实例:
import { createRouter, createWebHistory } from 'vue-router';
// 1. 定义路由组件(或异步导入)
import Home from '../views/Home.vue';
import About from '../views/About.vue';
// 2. 定义路由规则
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
// 3. 创建路由实例
const router = createRouter({
history: createWebHistory(), // 使用 HTML5 模式(去掉 URL 中的 #)
routes,
});
export default router;
3. 挂载到 Vue 应用
在 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');
三、核心功能详解
1. 路由跳转
声明式导航:使用
import { useRouter } from 'vue-router';
router.push('/about'); // 跳转到 about 页面
// 或 router.replace('/about') (替换当前历史记录)
import { useRoute } from 'vue-router';
console.log(route.params.id); // 通过 Composition API 获取
{ path: '', component: UserHome }, // /user
{ path: 'profile', component: UserProfile }, // /user/profile
{ path: '/settings', name: 'Settings', component: Settings }
router.push({ name: 'Settings' });
component: () => import('../views/Admin.vue'), // 动态导入
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
beforeEnter: (to, from, next) => { /* 逻辑 */ }
beforeRouteEnter(to, from, next) { /* 进入前 */ },
beforeRouteUpdate(to, from, next) { /* 路由参数变化时 */ },
beforeRouteLeave(to, from, next) { /* 离开前 */ },
meta: { requiresAuth: true, title: '控制台' }
scrollBehavior(to, from, savedPosition) {
return savedPosition; // 返回历史记录中的位置
import { useRoute, useRouter } from 'vue-router';
const route = useRoute(); // 当前路由信息(类似 this.$route)
const router = useRouter(); // 路由实例(类似 this.$router)
import { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{ path: '/', component: Home },
路由分层:将路由配置拆分为多个模块(如 authRoutes、adminRoutes)。
{ path: '/:pathMatch(.*)*', component: NotFound }
官方文档:[Vue Router 4 官方指南](
https://router.vuejs.org/zh/)
实战项目:尝试构建一个包含登录、权限管理和动态路由的 Admin 系统