以下是 Vue Router 的核心知识点及示例说明，涵盖路由配置、导航守卫、动态路由、嵌套路由等核心功能：
一、路由配置
1. 基本路由定义
通过 routes 数组定义路径与组件的映射关系。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = createRouter({history: createWebHistory(),routes
});export default router;
2. 路由模式
支持 hash 和 history 模式：
// Hash 模式（URL 带 #）
// createWebHashHistory()// History 模式（需服务器配置）
createWebHistory();
二、导航守卫
1. 全局前置守卫（beforeEach）
用于权限验证或全局拦截：
router.beforeEach((to, from, next) => {const isAuthenticated = localStorage.getItem('token');if (to.meta.requiresAuth && !isAuthenticated) {next('/login'); // 跳转到登录页} else {next(); // 放行}
});
2. 路由独享守卫（beforeEnter）
在路由配置中定义：
const routes = [{path: '/admin',component: Admin,beforeEnter: (to, from, next) => {// 验证管理员权限next();}}
];
3. 组件内守卫
在组件中使用 onBeforeRouteUpdate 或 beforeRouteLeave：
// Vue 3 组合式 API
import { onBeforeRouteLeave } from 'vue-router';export default {setup() {onBeforeRouteLeave((to, from, next) => {const answer = window.confirm('确定离开吗？');next(answer); // 用户确认后离开});}
};
三、动态路由匹配
1. 动态参数（:id）
// 路由配置
{ path: '/user/:id', component: User }// 组件中获取参数
// 模板中：{{ $route.params.id }}
// 组合式 API：const { id } = useRoute().params;
2. 参数作为 Props
通过 props: true 将参数传递给组件：
{ path: '/user/:id', component: User, props: true }// User 组件中接收 props
export default {props: ['id']
};
四、嵌套路由
1. 配置子路由
使用 children 属性定义嵌套路由：
const routes = [{path: '/user',component: UserLayout,children: [{ path: '', component: Profile }, // /user{ path: 'posts', component: Posts } // /user/posts]}
];
2. 父组件中渲染子路由
在父组件模板中添加 <router-view>：
<!-- UserLayout.vue -->
<template><div><h1>用户页面</h1><router-view></router-view> <!-- 子路由在此渲染 --></div>
</template>
五、命名路由与命名视图
1. 命名路由
通过 name 标识路由，便于编程式导航：
// 路由配置
{ path: '/settings', name: 'Settings', component: Settings }// 跳转时使用名称
router.push({ name: 'Settings' });
2. 命名视图
同一页面渲染多个视图：
<!-- App.vue -->
<template><router-view name="header"></router-view><router-view></router-view> <!-- 默认视图 --><router-view name="footer"></router-view>
</template>// 路由配置
{path: '/dashboard',components: {default: Dashboard,header: DashboardHeader,footer: DashboardFooter}
}
六、编程式导航
1. 基本跳转
// 字符串路径
router.push('/about');// 对象形式
router.push({ path: '/about' });// 命名路由
router.push({ name: 'About' });// 替换当前历史记录（无后退）
router.replace('/login');// 前进/后退
router.go(1); // 前进一步
router.go(-2); // 后退两步
2. 传递参数
// 路径参数
router.push({ name: 'User', params: { id: 123 } });// 查询参数
router.push({ path: '/user', query: { name: 'Alice' } });
七、路由懒加载
使用动态导入 (import()) 实现按需加载：
const routes = [{path: '/about',component: () => import('../views/About.vue') // 懒加载}
];
八、路由元信息
通过 meta 字段存储额外信息（如页面权限）：
{path: '/admin',component: Admin,meta: { requiresAuth: true }
}
九、错误处理（404页面）
配置通配符路由捕获未匹配路径：
{ path: '/:pathMatch(.*)*', component: NotFound }
十、过渡动效
为路由切换添加动画：
<template><router-view v-slot="{ Component }"><transition name="fade" mode="out-in"><component :is="Component" /></transition></router-view>
</template><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {opacity: 0;
}
</style>
总结
| 核心功能 | 实现方式 |
|---|---|
| 路由配置 | createRouter + routes 数组 |
| 导航守卫 | beforeEach、beforeEnter、组件内守卫 |
| 动态路由 | path: '/user/:id' + $route.params 或 props |
| 嵌套路由 | children 属性 + 父组件 <router-view> |
| 编程式导航 | router.push、router.replace |
| 路由懒加载 | component: () => import('...') |
| 路由元信息 | meta 字段 + 导航守卫校验 |
| 过渡动效 | <transition> 包裹 <router-view> |
通过灵活运用这些功能，可以构建复杂且高效的单页面应用（SPA）。
