vue-router中hash模式与history模式的区别

Vue-router是Vue.js官方的路由管理器，它可以轻松地为单页应用提供路由功能。在Vue-router中，路由模式分为hash模式和history模式，它们的区别如下：

Vue-router是Vue.js官方的路由管理器，它可以轻松地为单页应用提供路由功能。在Vue-router中，路由模式分为hash模式和history模式，它们的区别如下：

Hash模式

在浏览器中，hash（#）符号后面的所有字符都不会被发送到服务器，这使得单页应用成为现实。在Vue-router中，hash模式是默认的路由模式。

特点

• URI的hash值用于表示当前的路由状态
• 使用window对象的onhashchange事件监听hash值的变化
• 不需要服务器端支持
• 兼容性更好，支持IE8及以上

示例

假设我们有一个名为App的Vue组件，我们可以定义路由如下：

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

在上面的路由定义中，我们使用了mode: 'hash'来使用hash模式，同时使用了两个路由：

• 当路径为根路径/时，使用App组件进行渲染
• 当路径为/about时，使用About组件进行渲染

History模式

在HTML5的History API中，可以通过pushState和replaceState方法改变URL地址，而不会重新加载页面。Vue-router同时也提供了使用HTML5的history模式来处理URL，这种模式允许在没有hash的情况下使用和操作URL。

特点

• URI的path用于表示当前的路由状态
• 使用wondow对象的onpopstate事件监听path值的变化
• 需要服务器端支持，需要配置对于的路由规则，避免404错误
• 兼容性较差，仅支持IE10及以上

示例

假设我们有一个名为App的Vue组件，我们可以定义路由如下：

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

在上面的路由定义中，我们使用了mode: 'history'来使用history模式，同时使用了两个路由：

• 当路径为根路径/时，使用App组件进行渲染
• 当路径为/about时，使用About组件进行渲染

当我们访问http://localhost/时，我们将看到App组件被渲染，而当我们访问http://localhost/about时，我们将看到About组件被渲染。

总的来说，hash模式与history模式各有优缺点，需要根据需求选择适合自己的模式。对于一些比较老的浏览器，hash模式是一个不错的选择，而现代浏览器中，history模式成为了首选模式。