不重新加载的情况下改变浏览器地址
xiebenyin 人气:0我以前在学习/使用 vue-router 的时候不理解为什么浏览器地址发生了改变,浏览器却不用重新加载。
现在我可以把这个东西讲明白了,有两种方案可以实现改变 URL 但页面不进行整体的刷新。
hash 模式
location.hash = "foo"
可以通过直接赋值 location.hash 来改变 URL但页面不刷新
浏览器不会发送请求,使用 hash 改变 URL 后页面刷新会正常显示
history 模式
history.pushState({name: "Nicholas"}, "Nicholas' page", "nicholas.html")
history.pushState()方法接收三个参数:状态对象(可以传一个空对象), 新状态的标题(可以传一个空字符串),相对URL
浏览器不会发送请求,使用 history.pushState() 改变 URL 后页面刷新不会正常显示
history.replaceState({}, '', 'demo')
接收的参数与 history.pushState() 方法一致
与 history.pushState 区别是 不会在历史状态栈中创建新状态,只会重写当前状态 (没有历史记录)。
加载全部内容