vue-router的mode问题

Question

在一个页面中分别有三个div，对应三个js文件，分别为其加入设置路由，

对应的js文件如下

但是当第三个路由设置如下

但是当第三个路由设置如下

Vue.use(VueRouter);

const router=new VueRouter({

    mode:'history',

    routes:[

       {

           path:'/settings',

           component:Levelone,

           children:[

           {

              path:'emails',

              component:Levelthree

           },

           {

              path:'profile',

              components:{

                  default:Levelfour,

                  helper:Levelfive

              }

           }

           ]

       }

    ]

})

router.push('/settings/emails')

这时就会使前面两个路由无法正常显示，并且报错

但是当将第三个路由的mode设置为hash，三个路由可以正常显示；

请问这个mode的具体设置的区别在哪里呢，设置为history的时候为什么不能正常显示呢？

Answer 1

我猜一下，由于第三个设置为history模式，导致页面地址变为不带#的地址（虽然是三个vue实例，但是路由都是操作的同一个页面的history api），虽然没看出来这个net::ERR_ABORTED具体是什么错误，但是导致的js的加载或者前两个的路由解析（还是按照hash解析的）发生了错误。ip:8080/#/index/123ip:8080/index/123这两个路径下的相对路径地址是不一样的，对于./app.js分别为ip:8080/app.jsip:8080/index/123/app.js

Answer 2

之后发现在多个路由的mode不同的时候，可以在mode为history的路由设置为mode:'history',base:__dirname,这个时候就会将所有路由正常显示了，但是路由是命名视图的时候，还是不行的，还是出现上面的问题从而发现了新的问题：将命名视图如上面进行设置，const router=new VueRouter({    mode:'history',    base:__dirname,    routes:[       {           path:'/settings',           component:Levelone,           children:[           {              path:'emails',              component:Levelthree           },           {              path:'profile',              components:{                  default:Levelfour,                  helper:Levelfive              }           }           ]       }    ]})当不写语句router.push('/settings/emails')的时候，页面其他路由正常显示但是这个命名视图的路由不能显示在页面上，但当写入语句router.push('/settings/emails')就会出现一开始的错误，，这是为什么呢？