vue-router3.x中hash和history路由模式的区别

配置项

vue-router3.x版本中，通过 Router 构建选项中的mode选项进行配置

• 默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)
• 可选值: "hash" | "history" | "abstract"
• 配置路由模式:
  • hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
  • history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
  • abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

import VueRouter from 'vue-router'
const router = new VueRouter({
    mode: 'hash'
})

Hash模式和History相同点

1. 都是用于构建spa项目;
2. 都是基于浏览器提供的api进行功能实现;
3. 当这两个方法执行路由修改时，只能改变当前地址栏的URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行

Hash模式和History区别

1.实现原理不同

hash模式

使用 URL hash 值来作路由。监听 hashchange事件，支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

特点

1. 优点 - 兼容性好：Hash模式可以在所有现代浏览器中正常工作，并且对于旧版浏览器也具有良好的兼容性
2. 缺点 - hash 只可修改 # 后面的部分

history模式

通过 History Api 进行路由的跳转和监听，需要浏览器支持 History Api;

1. 优点 - pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;
2. 优点 - pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中
3. 优点 - pushState(stateObject,title,newUrl) 通过stateObject可以添加任意类型的数据到记录中，可以设置title属性

2.url显示方式不一致

hash模式

url地址中会夹带#

特点

1. 优点 - hash值不会被包含在http请求中，对后端无影响，代码部署时，不需要进行额外配置。
2. 缺点 - url地址中会夹带#，不美观
3. 缺点 - url地址中会夹带#，hash用来做路由则限制了原本的锚点功能，锚点功能需要通过js实现
4. 缺点 - 由于Hash对于服务端来说是不可见的，所以对于SEO不友好

history模式

URL 就像正常的 url, 没有 #

特点

1. 优点 - url更加美观;
2. 优点 - seo友好
3. 缺点 - 部署需要后台配置支持;