在Vue.js中进行子路径反向排序

Question

我用Vue.js路由器写了一个带有嵌套子路由的小路由，我期望（并且它有效）作为输出：

• 从Main（1）
加载数据
• 从Sub（2）
加载数据

然而，当我点击浏览器上的刷新按钮时，命令反转为：

• 从Sub（2）
加载数据
• 从Main（1）
加载数据

＆＃13;

＆＃13;

    var Main = Vue.extend({
      template:
        '<div class="foo">' +
          '<h2>This is Main!</h2>' +
          '<router-view></router-view>' +
        '</div>',
      ready: function() {
      	console.log('Load data from Main (1)');
      }
    })
    
    var Sub = Vue.extend({
        template: '<p>This is sub!</p>',
        ready: function() {
      		console.log('Load data from Sub (2)');
        }
    })
    
    // configure router
    var router = new VueRouter()
    
    router.map({
      '/': {
        component: Main,
        subRoutes: {
          '/bar': {
            component: Sub
          }
        }
      }
    })
    
    // start app
    var App = Vue.extend({})
    router.start(App, '#app')

＆＃13;

<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.10/vue-router.min.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <a v-link="{ path: '/' }">Go main route</a>
    <a v-link="{ path: '/bar' }">Go to subroute</a>
  </p>
  <router-view></router-view>
</div>

＆＃13;

＆＃13;

＆＃13;

您可以在http://jsfiddle.net/L6tuweue/看到工作副本，只需点击显示部分的重新加载按钮，即可打开控制台。

我做错了什么？

感谢。