路由守卫与懒加载
路由守卫在导航前后插入拦截逻辑：全局前置守卫 router.beforeEach((to, from) => ...) 最常用——未登录跳登录页、无权限跳 403、离开页面前确认保存。返回 false 或跳转路径即可阻止/重定向原计划导航。
懒加载让每个路由的组件打成独立 JS 文件，访问该路由才下载（动态 import）。首屏只加载首页代码，大应用体积可控。配合 Vite 的自动分包 与 Suspense 加载提示更好。
- beforeEach：登录拦截/权限校验的最常用位置
- 懒加载：() => import(组件)，访问才下载，首屏更快
- 路由独有守卫 beforeEnter：只拦某个路由（如 VIP 页）
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>路由守卫与懒加载</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script> </head> <body> <div id="app"> <router-link to="/">公开页</router-link> <router-link to="/vip">VIP 页</router-link> <router-view></router-view> </div> <script> const { createApp, h } = Vue; const { createRouter, createWebHistory } = VueRouter; const Public = { render: () => h('p', '公开内容，所有人可见') }; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Public }, { path: '/vip', // 懒加载：访问 /vip 才下载这块代码 component: () => new Promise((r) => setTimeout( () => r({ render: () => h('p', 'VIP 内容') }), 300)) } ] }); // 全局前置守卫：登录拦截 router.beforeEach((to) => { const logined = false; // 实际从 Pinia/本地存储读取 if (to.path === '/vip' && !logined) { console.log('拦截：未登录，跳回首页'); return '/'; // 返回路径即重定向；返回 false 取消导航 } return true; // 放行 }); createApp({}).use(router).mount('#app'); </script> </body> </html>
本节要点beforeEach 做登录/权限拦截（返回路径重定向）；路由组件用动态 import 懒加载瘦首屏。
