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，或点击首页自动更新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路由不变的本质