Vue Router 是 Vue 官方路由库，用于实现 SPA 无刷新跳转与状态管理；其守卫机制需按触发时机分三层：全局（beforeEach/afterEach/beforeResolve）、路由独享（beforeEnter）、组件内（beforeRouteEnter/Update/Leave），各司其职。
Vue Router 是 Vue 官方路由库，核心作用是实现单页应用（SPA）中页面的无刷新跳转与状态管理。配置它不难，但守卫机制容易用错——关键不在写多少代码，而在理解每个守卫的触发时机和作用边界。
路由基础配置：5步完成初始化
从零搭建只需五步，缺一不可：
- 安装依赖：
npm install vue-router@4（Vue 3 推荐 v4） - 创建路由实例：用
createRouter+createWebHistory()（生产环境）或createWebHashHistory()（兼容旧浏览器） - 定义 routes 数组：每条规则含
path、name（命名路由更安全）、component（推荐懒加载写法() => import('@/views/Home.vue')） - 在 main.js 中注册：
app.use(router) - 模板中使用：
<RouterView></RouterView>渲染组件，<RouterLink to="/home">首页</RouterLink>替代 a 标签
全局守卫：控制所有跳转的入口与出口
适用于登录校验、权限拦截、埋点统计等跨页面逻辑。
-
router.beforeEach：导航开始前执行，必须调用
next()。可返回false取消跳转，或返回路径对象重定向（如未登录时跳转登录页并携带redirect参数） -
router.afterEach：导航完成后触发，无
next，适合改标题、发统计、关 loading 动画 - router.beforeResolve：在所有组件守卫和异步组件加载完后、导航确认前执行，适合做最终数据预检（比如检查用户是否有权访问某页的完整数据）
路由独享守卫：为特定页面加专属闸机
写在某条 route 配置里，只对该路径生效，比全局守卫更精准。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 用
beforeEnter字段定义，参数同beforeEach（to, from, next） - 常见场景：后台管理页需管理员 token；订单页需先校验订单 ID 是否有效；编辑页需判断用户是否拥有编辑权限
- 注意：它在全局前置之后、组件内守卫之前执行，顺序不可颠倒
组件内守卫：响应组件生命周期的精细控制
写在组件内部，直接关联组件状态，适合处理局部逻辑。
-
beforeRouteEnter：组件创建前触发，拿不到
this，但可通过next(vm => {...})访问实例（比如进详情页前拉取数据） -
beforeRouteUpdate：同一组件复用时触发（如 /user/1 → /user/2），能访问
this，适合响应参数变化重新请求 - beforeRouteLeave：离开当前组件前触发，常用于防误操作（如表单未保存提示确认）
守卫不是越多越好，而是按需选用：全局管“要不要走”，独享管“这扇门能不能进”，组件内管“进门后怎么准备、换房间怎么更新、出门前要不要锁门”。理清这个逻辑，配置和调试就清晰多了。
