Vue中vue-router的 hash 模式和 history 模式的区别

一、前言

        Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。 在实现单页面前端路由时，提供了两种方式：Hash 模式和 History 模式；vue2 是根据 mode 参数来决定采用哪一种方式，vue3 则是 history 参数。
Vue3

// hash模式
import {createRouter, createWebHashHistory} from 'vue-router'
const router = createRouter({
    history:createWebHashHistory(),
    routes
})

//history模式
import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})

Vue2

//hash模式
const router = new VueRouter({
    mode: 'hash',
    routes
})

//history模式
const router = new VueRouter({
    mode: 'history',
    routes
})

二、区别

hash 模式

1. hash 模式的 url 地址中带有 # 号
2. hash 模式通过 window.onhashchange 方法监听路由的修改
3. hash 模式下刷新请求时 url # 后面的内容会被忽略，不会被发送给服务器
4. hash 模式下，修改 # 后面的内容，浏览器会将这两个 URL 视为两个不同的历史记录条目，并允许用户通过浏览器的“后退”和“前进”按钮在这两个状态之间切换。
5. hash 模式打包后，直接在浏览器中打开 /dist/index.html 可以正常的访问（原因是第 3 条指出的原因）
6. hash 模式可以兼容部分低版本的浏览器

history模式

1. history 模式是使用正常的 url 路径显示
2. history 模式通过 pushState 和 replaceState 方式修改路由改变
3. history 模式下刷新请求时当前 url 发送给服务器，如果服务器没有对应的文件，需要做相应的处理，如返回index.html,否则会报 404
4. history 模式下跳转操作会被添加到浏览器的历史记录中，用户可以通过浏览器的前进和后退按钮来导航路由历史记录
5. history 模式打包后，直接在浏览器中打开 /dist/index.html 会报错（原因是第 3 条指出的原因）
6. history 模式因为是使用的 HTML5 的新规范，所以不能兼容低版本的浏览器
   ​

三、深入了解

1.hash模式其实是使用了锚点技术来进行了重写URL访问路径，它会在原有的URL的路径后面拼接/#/xxx,这种方法是的好处就是在于可以在不重新加载原有的HTML文件的基础上，实现切换URL路径的目的，是一种纯静态技术。URL 的锚部分(以 ‘#’ 号为开始) 发生改变时会触发 window.onhashchange事件,通过javascript编程可以快速切换DOM。其中会有一个event参数如下：

2.history也是一种VueRouter的路由模式，history与hash不同之处在于，他不使用锚点技术来重写URl路径，它可以直接重写URL路径，所以在路径之中就不存在#，在视觉上面更加的美观，history模式采用了history对象中的pushState函数来实现重写UR路径。重写后的路径不包含原来HTML物理文件的访问地址，故重写后刷新页面会造成404无法访问的效果。在一些开发工具解决了在开发环境的刷新问题，但项目发布到生产环境时，还需要配合服务器的转发规则重写，以支持history模式下的路由加载。