vue-router 的原理

最新推荐文章于 2025-05-12 12:49:18 发布

原创最新推荐文章于 2025-05-12 12:49:18 发布 · 182 阅读

CC 4.0 BY-SA版权

本文介绍了Vue Router中的两种导航管理模式：hash和history。hash模式利用URL的锚点（#）实现路由，而history模式借助HTML5的pushState和replaceState方法提供更接近传统服务器路由的体验，但需要后端配合处理路由。history模式的URL更加友好，但可能引发404错误。pushState和replaceState允许添加数据到历史记录，并能修改URL。理解这两种模式对于前端开发者优化SPA应用至关重要。

Vue 的 spa 全程是 Single Page Application（单页应用程序）

export default new Router({ mode: 'history', routes }) mode 的可选值是 hash 和 history
hash 带 # 而 history 则看起来更像是真正的路由
hash：hashHistory.push() 是将新路由添加到浏览器访问历史的栈顶和 hashHistory.replace() 是直接替换掉当前的路由
history: HTML5 开始，使用的 pushState(), replaceState() 不仅仅是对浏览器历史记录栈的读取，可以对之进行修改；window.history.pushState(stateObject, title, URL)window.history.replaceState(stateObject, title, URL) 其中参数的作用：当浏览器跳转到新的状态的时候，将触发 popState 事件，这个事件将携带这个stateObject 的副本，title：所添加记录的标题，url：所天机记录的 url；
pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
pushState可额外设置title属性供后续使用
history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误。