Vue2-hash与history路由模式

路由有两种模式:一种是 hash 模式、另一种是 history 模式,在使用 vue-cli 以及 vue-router 默认搭建的 Vue 项目,若不做特殊的配置,默认就是 hash 模式。

1# 哈希模式

vue-router 默认为 hash 模式,使用 URL 的 hash 值来模拟一个完整的 URL,当 URL 改变时,页面不会重新加载。

hash 路由模式是这样的:http://www.example.com/#/xx#号后面就是 hash 值,改变后面的 hash 值,它不会向服务器发出请求,因此也就不会刷新页面。并且每次 hash 值发生改变的时候,会触发 hashchange 事件。

js 复制代码
windows.addEventListener('hashchange', () => {
  console.log(window.location.hash); // 打印 hash 值
})

2# 历史模式

vue-router 实例化配置对象中添加mode: history 便会由 hash 模式变为 histroy 模式。

js 复制代码
const router = new VueRouter({
    mode: 'history',
    routes: [xxx]
})

history 路由模式是这样的:http://www.example.com/xxx,不带 # 号。

2.1 pushState() 与 replaceState()

vue-router 会通过 history.pushState() 方法或 history.replaceState() 方法来改变 URL 的路径部分,而不刷新页面。

pushState() 方法用于在历史中添加一条记录,该方法不会触发页面刷新,只是导致 History 对象发生变化,地址栏会有变化。

语法:history.pushState(stateObject, title, url)

  • stateObject:传递到新页面的数据对象。如果不需要传递数据,可以传入 null。
  • title:指定标题,但大多数浏览器并不使用这个参数,所以通常可以传入空字符串。
  • url:新的网址,必须与当前页面处在同一个域。如果不指定,则默认为当前路径。如果设置了一个跨域网址,则会报错。

注意: 如果 pushState 的 url 参数设置了一个新的锚点值(即 hash 值),并不会触发 hashchange 事件。 反过来,如果 URL 的锚点值变了,则会在 History 对象创建一条浏览记录。

replaceState() 方法用来修改 History 对象中的当前记录,用法与 pushState() 方法一样。

语法:history.replaceState(stateObject, title, url)

  • stateObject:传递到新页面的数据对象。如果不需要传递数据,可以传入 null。
  • title:指定标题,但大多数浏览器并不使用这个参数,所以通常可以传入空字符串。
  • url:新的网址,必须与当前页面处在同一个域。如果不指定,则默认为当前路径。如果设置了一个跨域网址,则会报错。
js 复制代码
history.pushState({data: 1}, '', '?page=1')
// URL 显示为 http://www.example.com/index.html?page=1

history.pushState({data: 2}, '', '?page=2');
// URL 显示为 http://www.example.com/index.html?page=2

history.replaceState({data: 3}, '', '?page=3'); 
// URL 显示为 http://www.example.com/index.html?page=3

history.pushState(null, '', 'https://www.xxx.com/index.html');
// 会报错

2.2 popstate 事件

每当 history 对象出现变化时,就会触发 popstate 事件,仅仅调用 pushState() 方法或 replaceState() 方法 ,并不会触发该事件。只有用户点击浏览器倒退按钮和前进按钮,或者调用History.back()History.forward()History.go() 方法时才会触发该事件。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。

注意 :页面第一次加载的时候,浏览器不会触发 popstate 事件。

使用的时候,可以为 popstate 事件指定回调函数,它的参数是一个 event 事件对象,其 state 属性指向当前的 state 对象,相当于 history.state 对象。

js 复制代码
window.addEventListener('popstate', function (e) {
   console.log(e.state);// 相当于 history.state
   console.log(history.state);
})
相关推荐
Json_1817901448024 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端