history 改成 模式_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模式下，以 / 开头的嵌套路径会被当作根路径，所以使用“./”引入文件，就会找不到文件了，因为文件本身就是在项目根目录下的，并不在嵌套路径这个目录下。