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/123
ip:8080/index/123

这两个路径下的相对路径地址是不一样的，对于./app.js分别为

ip:8080/app.js
ip: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')就会出现一开始的错误，，这是为什么呢？