Vue-router中hash模式与history模式的区别详解

Vue-router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便地实现前端路由功能。在Vue-router中，有两种路由模式：hash模式和history模式。

hash模式与history模式的区别

hash模式

hash模式是指URL地址中有一个#号，并且所有的路由都是在这个#号后面进行的。hash模式的路由URL如下：

http://www.example.com/#/home

在这个URL中，#后面的内容/home就是路由路径。使用hash模式的好处是兼容性很好，因为即使在旧版的浏览器中，路由也可以正常工作。缺点是URL不够美观，因为所有的路由都在#号后面，体验和SEO效果不佳。

history模式

history模式是指URL地址中没有#号，而是完整的路径。history模式的路由URL如下：

http://www.example.com/home

使用history模式的好处是URL美观，因为所有的路由都在根路径下，体验和SEO效果都会好一些。缺点是兼容性不好，需要浏览器支持HTML5的history API，在老的浏览器中可能会出现问题。

使用示例

下面我们来看一下如何在Vue-router中使用hash模式和history模式。

使用hash模式

使用hash模式非常简单，只需要在创建Vue实例之前，给Vue-router添加mode属性即可。示例代码如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'hash', // 告诉路由使用hash模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    ...
  ],
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

上面的代码中，我们在创建VueRouter实例时，给mode属性设置为'hash'，这样Vue-router就使用了hash模式。可以看到，在路由URL中，所有的路由都是在#号后面进行的。

使用history模式

要使用history模式，需要在创建VueRouter实例时，给mode属性设置为'history'，并且需要确保服务器在访问不存在的URL时，返回同一个HTML文件，否则在访问不存在的路由URL时，会出现404错误。示例代码如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history', // 告诉路由使用history模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    ...
  ],
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

上面的代码中，我们在创建VueRouter实例时，给mode属性设置为'history'，这样Vue-router就使用了history模式。可以看到，在路由URL中，所有的路由都在根路径下进行，URL更加美观。

结语

在Vue-router中，hash模式和history模式的选择，取决于你的项目需要。如果需要兼容性好，并且不要求SEO效果，请使用hash模式；如果需要URL美观和SEO效果，请使用history模式。