Vue history和hash模式

一、简介

         ~~~~~~~~         在Vue.js中，路由模式是用来管理应用程序中不同页面之间的导航的机制。Vue Router支持两种常见的路由模式：history模式和hash模式。

1. History 模式：
            ~~~~~~~~         History模式使用浏览器的history.pushState API 来管理路由。它通过修改浏览器的URL来实现导航，而不会产生像hash模式那样的"#"符号。

   ①使用History模式的优点：

   • 更加美观的URL：URL不包含"#"符号，看起来更加清晰、美观。
   • 更自然的导航：URL看起来像传统的URL，更符合用户习惯。

   ②使用History模式的缺点：

   • 需要服务器支持：因为使用history模式时，浏览器的URL会发生变化，所以需要服务器配置以确保在直接访问URL时能够正确响应。

   启用History模式，你需要在Vue Router的初始化中设置mode为history：

   const router = new VueRouter({
         
         
   	  mode: 'history',
   	  routes: [
   	    // 路由配置
   	  ]
   });
   

2. Hash 模式
          ~~~~~~       Hash模式使用浏览器的URL中的"#“符号来实现导航。当URL中的hash改变时，不会触发页面刷新，而会通过监听hashchange事件来更新视图。
   ①使用Hash模式的优点：
            ~~~~~~~~         兼容性好：不需要服务器特殊配置，兼容性更好。
            ~~~~~~~~         简单易用：不需要额外的服务器配置，即可开始使用。
   ②使用Hash模式的缺点：
            ~~~~~~~~         URL中包含”#"符号：URL看起来不太美观，可能不如history模式那样友好。
   启用Hash模式，是Vue Router的默认模式，你不需要特别设置，除非你想使用history模式。

总之，Vue Router的history模式和hash模式在URL展示和浏览器支持方面有所不同，你可以根据项目需求选择适合的路由模式。