使用vue-router时hash路由可以实现跳转，但是history路由不可以

问题描述

搭建vue-router过程中,使用history路由

const router = new vueRouter({
    mode: 'history',
    routes: routerMap,
});

url:http://localhost:8080/home

搭建vue-router过程中,使用hash路由

const router = new vueRouter({
    mode: 'hash',
    routes: routerMap,
});

url:http://localhost:8080/#/home

分析原因

hash路由与history路由的区别

hash路由：#后面为hash部分，hash仅为客户端的状态，当向服务端发送请求的时候，hash的部分并不会带过去，但是history路由不同，回将整个路由都穿过去。

如：hash路由为http://localhost:8080/#/home，history路由为：http://localhost:8080/home

（1）当访问/的时候，两者的行为都是一致的，返回的都是index.html

然后再跳转到/#/home和/home的时候，两者都是相同的跳转，因为页面和脚本文件已经加载了，接下来脚本实现路由跳转，一切正常。

（2）但是当直接访问/#/home和/home时

hash路由向服务端发送请求的时候，hash的部分不会带过去，所以访问的还是/，所以首先会加载页面和脚本文件，然后再脚本首先路由跳转。

hsitory路由当访问/home时，向服务端发送的请求也是/home，但是server端并没有进行配置，所以返回的是404.

解决方法

webpack配置

    devServer: {
        contentBase: './dist', //服务器的根路径在那个文件下
        open: true, //自动打开浏览器
        proxy: {
            '/api': 'http://localhost:3000', //跨域的代理
        },
        port: 8080, //改变浏览器打开的默认端口号
        overlay: {
            errors: true, // 将webpack编译的错误显示在网页上面
        },
        +  historyApiFallback: true,
    },

historyApiFallback其他功能

可以将不同的路由配置不同的入口文件