vue-router直接进入addRoutes动态加载的路由，导致router-view区域未渲染

Question

vue-router直接进入子路由，父路由尚未加载导致白板

类似这样一个路由结构：

var Router = VueRouter
Vue.use(Router)

var app = {
    template: '<div><h1>App path: {{$route.path}}</h1>'
  + '<div v-for="p in paths"><router-link :to="p">{{p}}</router-link></div>'
  + '<br/><a :href="\'#\' + $route.path" target=_blank>new win</a><br/>'
  + '<router-view></router-view></div>',
  data(){
    return {
      paths: '/login,/main,/page1'.split(',')
    }
  }
}
var login = {
  template: '<div><h3>Login</h3></div>'
}
var main = {
  template: '<div><h2>main</h2><router-view></router-view></div>'
}
var page1 = {
  template: '<div><h4>page1</h4></div>'
}

const router = new Router({
  mode: 'hash',
  routes: [
    {path:'/login', component: login}
  ],
})

router.beforeEach((to, from, next) => {
  if(to.path !== '/login' && !router.routesAdded){
    router.routesAdded = true
    addRoutes()
  }
  next()
})


new Vue({
    el: '#app',
    router,
    render: h => h(app)
})

function addRoutes() {
  router.addRoutes([
    {
      path: '/main',
      component: main,
      children: [
        {
          path: '/page1',
          component: page1,
        },
      ]
    }]),
    1000
}

/main 是父路由，main.vue里面存在一个<router-view/>用于显示子路由页面page1.vue。

先进入 index.html#/main，再进 index.html#/page1，没有问题。
但如果直接进入 index.html#/page1 ，则显示空白，需要重新进一遍。

我做了个演示代码，请看：https://codepen.io/anon/pen/E...
当点击/page1，之后点击 'new win'，会发现页面没加载。

初步判断是由于动态路由加载时机所致，但动态路由是必须在路由已经初始化之后才能加载的，而且有判断部分页面才加载。

目前的做法，只能强制用location.replace('/main')先访问父路由，延时再location.replace('/page1')访问子路由。不知有没有什么好办法解决？

Answer 1

说下你组件未加载的问题的原因。
当路由为首此加载路由为main或page时，组件未加载是因为开始没有这两个路由，未匹配到任何路由，当然加载不出来。对于未匹配的，我们导航重新导航一下。但是当重新导航的路由依然匹配不到，会有bug，例如导航至/other,这个路由从始至终未出现过，会出现bug，可以判断下是否是新加的路由，是就重新导航，不是就next()，这样确保不会有bug
我对beforeEach这块做了一点改动,如下，

 if(!router.routesAdded){
    router.routesAdded = true;
    addRoutes();
  }
  if (to.matched.length === 0) {
    next(to.path);
  } else {
    next();
  }

Answer 2

你这里的 page1 的路径加了 '/' 斜杠，就是根路径了，和 main 是同级的，为什么要作为它的子组件？

Answer 3

你这个不是父子路由，结果应该是index.html#/main/page1

Answer 4

首先谢谢各位回复。
Vue的route父子关系，与path的层次关系并无直接关联的。
我做了一个实例代码，请看：https://codepen.io/anon/pen/E...
目前分析下来，应该跟父子嵌套没关系，可能是动态加载路由过迟所致。但是目前的解决方法location.replace不是好办法，还是希望有没有更优雅的办法？