路由就是URL 的翻译器

一个最小的前端路由，不含任何框架// 1) 路由表 const routes = [ { path: '/', render: () => '首页' }, { path: '/about', render: () => '关于' }, { path: '/user/:id',render: (p) => '用户 ' + p.id }, ]; // 2) 匹配：把 /user/42 变成 { path:'/user/:id', params:{ id:'42' } } function match(pathname) { for (const r of routes) { const keys = []; const pattern = r.path.replace(/:([^/]+)/g, (_, k) => { keys.push(k); return '([^/]+)'; }); const m = pathname.match(new RegExp('^' + pattern + '$')); if (m) { const params = {}; keys.forEach((k, i) => params[k] = decodeURIComponent(m[i + 1])); return { route: r, params }; } } return null; } // 3) 渲染 function render() { const hit = match(location.pathname); document.getElementById('app').textContent = hit ? hit.route.render(hit.params) : '404'; } // 4) 监听：两种模式在这里分叉 window.addEventListener('popstate', render); // 前进后退 render(); // 5) 跳转：不能改 location.pathname（会刷新），要用 pushState function push(path) { history.pushState({}, '', path); render(); // pushState 不触发事件，要手动调 }

服务端必须配合：把未命中的路径回退到入口文件【Nginx】 location / { try_files $uri $uri/ /index.html; } 【Apache】 RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] 【Node / Express】 app.get('*', (req, res) => res.sendFile(path.join(dist, 'index.html'))); 注意要放在所有 API 路由之后，否则会吃掉 API 请求 【静态托管】 大部分平台支持配置 rewrite / fallback， 没有这个选项就只能退回 hash 模式。

React Router 的同样结构<Routes> <Route path="/settings" element={<SettingsLayout />}> <Route index element={<Profile />} /> {/* /settings */} <Route path="account" element={<Account />} /> {/* /settings/account */} <Route path="theme" element={<Theme />} /> {/* /settings/theme */} </Route> </Routes> // SettingsLayout 里必须渲染 <Outlet />，否则子路由白屏

Vue Router 4 的完整顺序导航从 /a 到 /b 1. beforeRouteLeave （/a 组件内） ← 用户离开当前页 2. beforeEach （全局） ← 最常用的鉴权位置 3. beforeRouteUpdate （/b 组件复用时才触发） 4. beforeEnter （/b 路由独享） 5. beforeRouteEnter （/b 组件内，此时拿不到 this） 6. beforeResolve （全局） ← 所有异步守卫完成后 7. afterEach （全局） ← 导航已确认，收尾用 8. DOM 更新 9. beforeRouteEnter 的 next 回调（此时才有 this） 被取消或重定向时，走不到 7 之后的步骤。

拆太细的代价按页面拆（推荐） index.js 180KB home.js 40KB detail.js 55KB 首屏 220KB，切页面再拉 40-55KB 按组件拆（常见错误） index.js 60KB 30 个 chunk 各 3-8KB 首屏 60KB 但要发 12 个请求（首页用到的组件） 结论：HTTP/2 下多请求不算致命，但每个 chunk 都有 解析和执行开销，还有依赖被重复打进多个 chunk 的风险。 切分粒度应该是"会一起出现的代码"。

Vue keep-alive 的两个坑<keep-alive :include="['ListPage']"> <router-view /> </keep-alive> 坑 1：include 匹配的是组件的 name <script setup> 里没有 name，要用 defineOptions({ name: 'ListPage' }) 或者文件名推导（Vue 3.3+ 的 defineOptions） 坑 2：从详情页返回时数据不刷新 因为组件没销毁，onMounted 不再执行 解法：onActivated 里判断是否需要重新拉数据 坑 3：同一个组件不同参数被复用 /list?page=1 和 /list?page=2 会命中同一个缓存实例 需要 key 区分，或者 onBeforeRouteUpdate 里手动处理

状态放哪：三个判断标准能被分享 / 刷新要保留 / 要埋点统计 → 放 URL（query 或 params） 举个具体的： 列表筛选条件（状态、日期、关键词） → 放 query，可分享 列表页码 / 每页条数 → 放 query 弹窗打开与否 → 放内存（除非要深链） 表格列宽、展开行 → 放 localStorage 当前 tab → 放 query（能深链到某个 tab） 反面例子：把筛选条件放 store 里， 用户复制链接发给同事，打开是默认列表。