Vue 路由器工作不稳定

Question

我花了一整天的时间试图找出导致此示例失败的原因：

Vue.use(VueRouter);

var PlayerDetail =  {
  template: '<div>FOO</div>'
};
var PlayerList =  {
  template: '<div>BAR</div>'
};

var routes = [{
  path: '/player',
  component: PlayerList
}, { 
  path: '/detail',
  component: PlayerDetail
}];

var appRouter = new VueRouter({
  routes
});

var appVm = new Vue({
  appRouter
}).$mount('#app');

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/player">foo</router-link>
    <router-link to="/detail">bar</router-link>
  </p>
  <router-view></router-view>
</div>

如果它与这个完全一样有效：

Vue.use(VueRouter);

var Foo = {
  template: '<div>FOO</div>'
};
var Bar = {
  template: '<div>BAR</div>'
};

var routes = [{
  path: '/foo',
  component: Foo
}, {
  path: '/bar',
  component: Bar
}];

var router = new VueRouter({
  routes
});

var appVm = new Vue({
  router
}).$mount('#app');

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">foo</router-link>
    <router-link to="/bar">bar</router-link>
  </p>
  <router-view></router-view>
</div>

如您所见，这两个示例实际上是相同的代码，但在第一个示例中，我收到 TypeError: route is undefined when the router is rendering。

还有其他人看到我在这里遗漏的东西吗？

Answer 1

我认为路径和组件组合不正确

var routes = [{
  path: '/player',
  component: PlayerDetail
}, { 
  path: '/detail',
  component: PlayerList
}];

Answer 2

您正在传递 Vue 构造函数 { appRouter }，它是 { appRouter: appRouter } 的 shorthand。 Vue 构造函数需要一个具有 router 属性而不是 appRouter 属性.

的对象

如果要使用对象属性传递路由器对象，则需要准确命名路由器对象 router shorthand:

Vue.use(VueRouter);

var PlayerDetail =  {
  template: '<div>FOO</div>'
};
var PlayerList =  {
  template: '<div>BAR</div>'
};

var routes = [{
  path: '/player',
  component: PlayerList
}, { 
  path: '/detail',
  component: PlayerDetail
}];

var router = new VueRouter({
  routes
});

var appVm = new Vue({
  router
}).$mount('#app');

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/player">foo</router-link>
    <router-link to="/detail">bar</router-link>
  </p>
  <router-view></router-view>
</div>

Vue 路由器工作不稳定

Vue router working erraticaly

javascript

vue-router

vuejs2