前端路由概念
传统网站每次换页都向服务器请求新 HTML（刷新、白屏）；SPA（单页应用）只有一张 HTML，切换「页面」靠 JS 替换视图区域——这靠前端路由实现。URL 变了，但页面不刷新，由路由根据新 URL 渲染对应组件。
路由有两种模式：hash 模式用 #/about 形式，监听 hashchange 事件，兼容性最好、部署最省事；history 模式用真实的 /about 路径，靠 history.pushState API + 服务器配置（所有路径都回退到 index.html），URL 更美观。Vue Router 和 React Router 都支持这两种模式。
下面的示例用 15 行实现了一个可运行的 hash 路由，支持参数（/user/42）。看懂它，你就理解了 vue-router 里 <router-view> 背后在发生什么。
本节要点SPA 不刷新页面，由路由决定渲染哪个组件；hash 模式监听 hashchange，history 模式用 pushState + 服务器配置；动态路由如 /user/:id 支持参数。
HTML
<nav> <a href="#/home">首页</a> <a href="#/about">关于</a> <a href="#/user/42">用户 42</a> </nav> <div id="view"></div> <script> const view = document.getElementById('view'); // 极简 hash 路由：监听 hashchange，按路径分发渲染 function router() { const path = location.hash.slice(1) || '/home'; if (path === '/home') { view.textContent = '这是首页内容'; } else if (path === '/about') { view.textContent = '这是关于页内容'; } else if (path.startsWith('/user/')) { // 动态路由：从路径里提取参数 view.textContent = '用户 ID：' + path.split('/')[2]; } else { view.textContent = '404：页面不存在'; } console.log('路由变化 →', path); } window.addEventListener('hashchange', router); router(); // 首次进入也要执行一次 </script>
