javascript - Vue.js でのサブルートの逆順

Question

ネストされたサブルートを持つ Vue.js ルーターを使用して小さなルートを作成しました。

• メインからデータをロードする (1)
• Sub (2) からデータをロードする

ただし、ブラウザの更新ボタンを押すと、順序が逆になります。

• Sub (2) からデータをロードする
• メインからデータをロードする (1)

    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')

<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>

http://jsfiddle.net/L6tuweue/で作業コピーを確認できます。ディスプレイ セクションのリロード ボタンをクリックし、コンソールを開いたままにしてください。

私は何を間違っていますか？

ありがとう。