SPA 应用靠监听 hashchange 来处理路由

Hash 路由的工作原理

简单理解

浏览器有个功能：监听 hash 变化

window.addEventListener('hashchange', () => {
  console.log('hash 变了！', location.hash)
})

SPA 的处理流程

1. 用户访问   →  https://xxx.com/#/payMethod
                    ↓
2. 浏览器只加载 index.html（一次）
                    ↓
3. 用户点击按钮，代码执行
   window.location.hash = '#/bindCard'
                    ↓
4. hashchange 事件触发
                    ↓
5. Vue Router 监听到变化
                    ↓
6. Vue Router 根据 hash 显示对应页面
   （不是刷新页面，而是切换组件）

图示对比

传统网页（多页面）
┌─────────────┐
│ payMethod   │ ← 点击 → 刷新 → 新页面
│ (HTML文件)  │         ↓
└─────────────┘     ┌─────────────┐
                    │ bindCard    │
                    │ (另一个文件) │
                    └─────────────┘

SPA（单页面）
┌─────────────────────────┐
│ index.html (始终不刷新)  │
│                         │
│  组件A ← hashchange → 组件B
│ (payMethod)             (bindCard)
│                         │
└─────────────────────────┘

一句话总结

hashchange 是浏览器提供的 API，当 URL 中 # 后面的内容变化时会触发。Vue Router 监听这个事件，然后切换显示对应的组件，页面不刷新。