JavaScript路由切换核心是不刷新页面改URL并响应视图变化，基于Hash（利用hashchange事件与location.hash）或History API（pushState/replaceState配合popstate事件），需路由表匹配路径与组件，并注意服务端配置。
JavaScript实现路由切换，核心是不刷新页面的前提下改变URL并响应视图变化。单页面应用（SPA）的路由原理，本质是利用浏览器历史API（pushState、replaceState）和URL哈希（hash）机制，配合监听事件（如popstate、hashchange），动态渲染对应组件或内容。
基于Hash的路由实现
利用URL中#后面的部分（即hash值）变化不会触发页面刷新的特性，是最轻量、兼容性最好的方案。
- 通过
window.location.hash = '#/user'手动修改URL，或点击<a href="#/home">首页</a>自动更新hash - 监听
hashchange事件：window.addEventListener('hashchange', () => { renderRoute() }) - 在
renderRoute()中解析location.hash（如'#/post/123'），匹配路由规则，加载/渲染对应视图
基于History API的路由实现
使用history.pushState()和history.replaceState()可修改URL路径（如/about），且不向服务器发起请求，体验更接近传统多页应用。
- 导航时调用
history.pushState({ page: 'user' }, '', '/user')更新地址栏，不刷新页面 - 监听
popstate事件处理浏览器前进/后退：window.addEventListener('popstate', e => renderRoute(e.state)) - 注意：服务端需配置为所有前端路由都返回
index.html，否则直接访问/user会404
路由匹配与视图渲染的核心逻辑
无论用hash还是history，都需要一套映射关系来关联路径与组件/内容。
立即学习“Java免费学习笔记（深入）”；
- 定义路由表，例如：
const routes = [{ path: '/home', component: Home }, { path: '/user/:id', component: User }] - 解析当前URL路径（
location.pathname或location.hash.slice(1)），支持简单匹配或正则/路径参数提取（如/user/123→{ id: '123' }） - 找到匹配项后，清空容器节点（如
document.getElementById('app').innerHTML = ''），再插入新内容或挂载组件
现代框架中的路由抽象
React Router、Vue Router等封装了上述细节，提供声明式路由、嵌套路由、懒加载、守卫等能力，但底层仍依赖上述两种机制。
- React Router v6 默认使用
createBrowserRouter（基于history），也支持createHashRouter - Vue Router 同样支持
history和hash两种模式，通过router.push()统一触发导航 - 关键仍是拦截导航行为、更新URL、响应状态变更、驱动UI重绘——这是SPA路由不变的本质
