vue-router中的hash和history两种模式的区别

在Vue.js中，vue-router是一个非常重要的路由库，它允许我们在单页面应用中管理导航，通过这个库我们可以轻松构建单页面应用。vue-router支持两种路由模式：hash模式和history模式。

在Vue.js中，vue-router是一个非常重要的路由库，它允许我们在单页面应用中管理导航，通过这个库我们可以轻松构建单页面应用。vue-router支持两种路由模式：hash模式和history模式。

Hash模式

hash模式的核心就在于URL中的“#”符号。在hash模式下，当URL发生变化时，页面并没有重新加载，而是触发onhashchange事件。例如，当我们点击链接切换页面时，实际上是改变了URL中的hash值，然后触发路由器中设置好的事件来渲染页面。

hash模式的优点是兼容性好，不需要服务器支持，可以直接通过静态文件访问，不用担心404错误。同时，hash模式也可以用来解决单页面应用中前进后退的问题，我们可以通过监听onhashchange事件来实现。

示例：

//router配置
const router = new VueRouter({
  mode: 'hash',  //路由模式为hash模式
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

History模式

history模式则是将URL中的路径部分作为状态保存下来。在history模式下，当URL发生变化时，页面会重新加载，但是不会向服务器发送请求，而是直接解析浏览器缓存中的文件。

history模式需要后端服务器进行支持，需要后端服务器配置文件来匹配任意的路由，否则服务器会返回404错误。同时，history模式还可以通过History API来进行前进、后退操作。

示例：

//router配置
const router = new VueRouter({
  mode: 'history',  //路由模式为history模式
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

//后端服务器配置
//将所有路径都返回index.html文件
app.get('*', function(req, res){
  res.sendFile(__dirname + '/public/index.html');
});

总的来说，hash模式和history模式各有优缺点，根据实际需求来选择。

参考文献：

• Vue Router 官方文档