官方解析
Vue Router 路由有三种模式:
- hash 模式:使⽤ URL 中的 hash(即 # 后面的内容)来作为路由路径。
在这种模式下,页面不会重新加载,只会更新 hash 值,并触发路由变化,从而渲染对应的组件。 - history 模式:使⽤ HTML5 中新增的 History API 来管理浏览历史记录,从而实现页面的前进和后退。
在这种模式下,URL 中不会带有 # 号,而是使用真实的 URL 路径来作为路由路径。 - abstract 模式:在不需要基于浏览器的 API 时,可以使用这种模式。
在这种模式下,路由器并不会监听 URL 变化,而是通过调用 router.replace 或 router.push 来进行导航。
区别:
- hash 模式可以兼容较⽼的浏览器,但 URL 中会带有 # 号。
- history 模式无需带有 # 号,更加美观,但需要后端⽀持,否则刷新页面会导致 404 错误。
- abstract 模式主要用于⼀些特定场景,例如在使⽤ Node.js 时,可以使用 abstract 模式来构建路由。
⼀般来说,如果需要⽀持较⽼的浏览器,或者不需要后端⽀持,可以使用 hash 模式;
否则建议使用 history 模式。
一个总结
Vue Router 路由有三种模式:hash 模式、history 模式和 abstract 模式。
⼀般情况下,我们建议使用 history 模式,因为它对 SEO 更加友好、URL 更加规范,并且随着 HTML5 技术的普及,浏览器兼容性也不再是问题。
但是在特定场景下,如需要⽀持 IE9 及以下浏览器,或者不方便进行服务端配置时,可以选择使用 hash 模式。
而 abstract 模式则适⽤于⼀些特殊的场景,如⾮浏览器环境下的应⽤程序或者只需要使⽤编程式导航的情况。
忙里抽空更新一下~