前言

在单页面web网页中, 单纯的浏览器地址改变, 网页不会重载，如单纯的hash网址改变网页不会变化，因此我们的路由主要是通过监听事件，并利用js实现动态改变网页内容，有两种实现方式：

hash模式：监听浏览器地址hash值变化，执行相应的js切换网页；

history模式：利用history API实现url地址改变，网页内容改变； 它们的区别最明显的就是hash会在浏览器地址后面增加#号，而history可以自定义地址。

所以不想要url中含有#符号，就必须使用history模式。

如何开启使用history模式

首先将vue-router设置成history模式

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

开发环境：
利用webpack中自带的devServer服务，设置historyApiFallback，例：

 devServer: {
    host: '0.0.0.0',
    port: 8080, // 端口号
    proxy: {//代理接口防跨域
      '/api': {
        target: 'http://blog.reviosky.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    historyApiFallback: {
      rewrites: [{ from: /^\/(\/|$)/, to: '/index.html' }]
    },
    disableHostCheck: true
  }

生产环境：

​ 配置nginx:

location / {
  try_files $uri $uri/ /index.html;
}

全文完