1

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

  • 从 Main (1) 加载数据
  • 从 Sub (2) 加载数据

但是，当我点击浏览器上的刷新按钮时，顺序会反转为：

  • 从 Sub (2) 加载数据
  • 从 Main (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/上看到一个工作副本，只需点击显示部分上方的重新加载按钮并保持控制台打开。

我究竟做错了什么？

谢谢。

4

0 回答 0