我花了一整天的时间试图弄清楚是什么让这个例子失败了:
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:路由器渲染时未定义路由。
还有其他人看到我在这里缺少的东西吗?
您正在传递Vue
构造函数{ appRouter }
,这是{ appRouter: appRouter }
的简写。构造函数Vue
需要具有 router
属性的对象,而不是具有 appRouter
属性的对象。
使用 object 属性速记传入路由器对象,则需要准确命名路由器对象router
:
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>
我认为路径和组件组合不正确
var routes = [{
path: '/player',
component: PlayerDetail
}, {
path: '/detail',
component: PlayerList
}];