vue中两种路由模式hash和history

最新推荐文章于 2024-04-05 00:00:00 发布

前端小菜渣渣徐

最新推荐文章于 2024-04-05 00:00:00 发布

阅读量933

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/HOMEXS/article/details/126748675

版权

1、说vue路由的两种模式之前先讲一下为什么需要前端路由

vue中页面展示使用了SPA技术，即单页面应用(Single Page Application)。所谓单页 Web 应用，就是只有一张 Web 页面的应用。单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。浏览器一开始会加载必需的 HTML 、 CSS 和 JavaScript ，所有的操作都在这张页面上完成，都由 JavaScript 来控制。就我个人理解就是用户初次向服务端拉取前端资源时会把前端资源全部拉取下来，这是一张很大的页面，而用户手机里面展示的只是这个页面中的一小部分，至于展示哪一小部分则由前端路由来决定，前端路由的核心，就在于——改变视图的同时不会向后端发出请求。

spa技术的优缺点

优点：前后端分离，减少请求减轻服务端压力，一套后端程序代码，适配多端
缺点：首屏加载过慢，可以使用前端解决首次请求白屏问题（loading或者骨架屏）来优化

2、vue路由的两种模式的区别

就最直观来说，hash模式在域名后面有一个#,并且hash模式是vue里面的默认路由模式
hash模式的url后跟hash值#…，它的原理就是使用window.onHashChange来监听hash值的改变，一旦发生变化就找出此hash值所匹配的组件，进而将组件渲染到页面中。history模式中的url是以/user这种格式，比较常见，它的原理是通过window.onpopstate来监听路由变化，进而匹配不同的组件来渲染出来。
hash 模式下，仅hash符号之前的内容会被包含在请求中，如http://www.abc.com,因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。history模式下，前端的URL必须和实际向后端发起请求的URL一致。如htttp://www.abc.com/book/id。如果后端缺少对/book/id 的路由处理，将返回404错误
history设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，因此只能设置与当前URL同文档的URL；
5.history设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发动作将记录添加到栈中；