区分vue-router的hash和history模式

当我们使用Vue.js框架时，可以使用vue-router作为路由插件，实现单页应用程序的路由控制。vue-router默认使用hash模式，即使用URL中的hash值来映射到指定路由，而不会导致页面刷新。而history模式则是使用浏览器的History API来实现SPA中的路由功能。

区分vue-router的hash和history模式

hash模式

hash模式使用URL中的hash值来映射到指定路由，如下：

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

在hash模式下，URL中的hash值将被视为路由路径的一部分。例如，当路由路径为/about时，URL将为http://localhost:8080/#/about。

hash模式的优点是方便且兼容性好，因为绝大多数的浏览器都支持hash的变化。但是，hash模式的URL中会带一个#号，看起来不太美观，并且如果有很多嵌套路由，URL会变得相当冗长。

history模式

history模式使用浏览器的History API来实现SPA中的路由功能，如下：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

在history模式下，URL中的path部分将被视为路由路径的一部分。例如，当路由路径为/about时，URL将为http://localhost:8080/about。

history模式的优点是URL看起来更加美观，但需要浏览器支持History API。此外，如果没有正确配置服务器，使用history模式很容易出现404错误。

实例说明

为了更好地对hash和history模式进行区分，这里有两个简单示例。

示例1：hash模式

const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

在hash模式下，当路由路径为/about时，URL将为http://localhost:8080/#/about。

示例2：history模式

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

在history模式下，路由路径为/about时，URL将为http://localhost:8080/about。

以上是关于区分vue-router的hash和history模式的完整攻略，希望能够帮助到您。