一般会当做面试题问
vue 有几种路由模式
- hash 模式
- history 模式
异同
- hash模式：通过#号后面的内容的更改，触发hashchange事件，实现路由切换
- history模式：通过pushState和replaceState切换url，触发popstate事件，实现路由切换，需要后端配合
深入了解一下事件
hash hashchange
1、hash即URL中"#"字符后面的部分。
①使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置；
②hash还有另一个特点，它的改变不会导致页面重新加载；
③hash值浏览器是不会随请求发送到服务器端的；
④通过window.location.hash获取和设置hash。
window.location.hash值的变化会直接反应到浏览器地址栏（#后面的部分会发生变化），同时，浏览器地址栏hash值的变化也会触发window.location.hash值的变化，从而触发onhashchange事件。
通过window.location.hash获取hash
修改 hash
2、hashchange事件（IE8已支持该事件）
①当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）
②hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性：
window.addEventListener('hashchange',function(e) { console.log(e.oldURL); console.log(e.newURL) },false);
代码
浏览器效果
监听hashchange 事件, 跳转到根路由的时候, 就会打印出新旧hash值.
history模式
官网解释
意思就是假设:
前端跳转的路由,是后端同学返回的, '/data/water'
但是前端没有配置这个静态路由, 就会直接返回 404 not found 页面.
类似这样的系统默认的404页面
so 需要前后端配合, 要么返回前端自己写的漂亮的404 页面, 要么是返回到项目首页. (返回首页也不是很友好, 可能会打断用户的操作思路和顺序)
就需要前端配置一个路由
前端路由js 配置
或者后端配置nginx 等等
参考配置: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
官方文档
关于history.pushState() 方法是做什么的, 这篇文章比较详细
https://blog.csdn.net/yexudengzhidao/article/details/101448168
可以了解一下,
总结
意思就是 history.pushState 给浏览器创造了一个历史记录, 你没访问过的历史记录, 然后回退的时候, 想去到这个没访问过的页面, 可以直接使用 history.go(-1)
比较方便.
以上
网友评论