关于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模式下刷新后只保留#后的内容，页面状态不会保留

4. 如何选择？

• 如果是纯前端应用，推荐使用 History 模式；
• 如果有涉及到服务端渲染，则必须使用 History 模式；
• 如果使用 History 模式时，请确保您的服务器支持 URL 重写以避免 404 错误；
• 如果您不确定如何选择模式，# 就是您的最佳选择。

5. 总结

Hash路由和History路由在Vue中的使用是非常方便的，开发者可以根据自己的需求来选择合适的路由模式。无论是使用哪种模式，都有各自的优缺点，开发者需要根据具体的情况来选择合适的路由方式。

以上就是我的关于Vue中hash和history的区别与使用的详细攻略，希望对大家有所帮助。