关于vue中hash和history的区别与使用图文详解

让我来为大家讲解“关于Vue中hash和history的区别与使用图文详解”。

1. 什么是Hash路由

Hash路由采用URL的hash值来模拟一个完整的URL，以达到实现页面局部刷新的效果。其中，hash值前面的#标识符在URL中称为锚点，可以通过JS来改变锚点的值，而不会刷新页面或向服务器请求。

Hash路由的特点：

URL中有一个#标识符
改变URL中的hash值，不会向服务器发送请求，也不会刷新页面
可以通过window.location.hash或location.hash来获取当前URL的hash值

Hash路由的实现代码示例：

// 定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ],
  mode: 'hash' // 启用hash路由模式
})

// 将路由实例挂载到Vue实例中
new Vue({
  router
}).$mount('#app')

2. 什么是History路由

History路由采用浏览器的History API来操作浏览器的历史记录，以达到实现页面局部刷新的效果。使用History API来操作浏览器的历史记录，能够让我们在URL中去掉#标识符，看起来更加的美观和简洁。

History路由的特点：

URL中没有#标识符
改变URL中的路径或参数，会向服务器发送请求，刷新页面
可以通过window.history.pushState()或replaceState()方法来操作浏览器的历史记录

History路由的实现代码示例：

// 定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ],
  mode: 'history' // 启用history路由模式
})

// 将路由实例挂载到Vue实例中
new Vue({
  router
}).$mount('#app')

3. hash和history的对比

URL 可读性：History模式URL更加美观，而Hash则不太友好
刷新/访问页面：History模式下，刷新/访问页面都需要后台配合重定向，才能达到hash一样的效果，同时规避404错误。Hash模式下，访问任何页面只要有入口文件即可
真实路径：Hash模式下仅仅是一个伪装，通过get请求，路径中的参数（#号后）传给前端进行相应的处理后替换到页面路径上。而History模式下，前端路由和后台路由保持一致
SEO：由于搜索引擎不执行 JavaScript，所以对 SEO 不友好。这也是 Hash 路由重要的应用场景。
刷新后的状态：History模式下，刷新后依然可以回到该页面状态，hash模式下刷新后只保留#后的内容，页面状态不会保留