vue-router中history模式页面报错

首先配置路由的时候，

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from 'routes/index.js';  //此处关键字不可以是route

Vue.use(VueRouter);
const router = new VueRouter({
  routes,
})

new Vue({
router, //此处key必须是router，可以router:routers,但key必须是router
...
})

vue-router的默认路由方式是hash,如果想要指定为history模式，则

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

----------------------------------------分割线-------------------------------------------

原本我的项目是用的hash模式，我天真的以为只要加上mode：'history'就可以了，加上之后页面显示不出来，切换tab时候报文件找不到，发现静态资源文件路径不对，会在路径前面拼上一些不该有的信息。
类似：localhost:8080/home/css/common.css。 home不应该带上的
原因是我的router写的

[
{
 path: '/home',
 component: r => require.ensure([], 
   ()=>r(require('../components/home/index.vue')), 'home'),
  children: [
     {
        path: '',
        redirect: '/home/index'    //就是他导致的
    }, 
}
]

原因是之前的hash模式下，根路径是不会变的，但是在history模式下，根路径会随着嵌套路由的变化而变化的，上面那种方式就不能那样写了。

image.png

另外，在文件中引入的静态资源文件，比如‘./images/bg.png’也要改成‘/images/bg.png’;

也就是要把 ‘./’ 改成 ‘/’ 。

ps:
./ 是指用户所在的当前目录（相对路径）；
/ 是指根目录（绝对路径，项目根目录），也就是项目根目录；
对于hash模式，根路径是固定的，就是项目的根目录，但是history模式下，以 / 开头的嵌套路径会被当作根路径，所以使用“./”引入文件，就会找不到文件了，因为文件本身就是在项目根目录下的，并不在嵌套路径这个目录下。

参考：https://www.cnblogs.com/xyyt/p/7718867.html