Vue的路由器工作erraticaly

我花了一整天试图找出是什么使这个例子失败：Vue的路由器工作erraticaly

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是未定义的。

其他人看到我在这里失踪的东西吗？

来源

2017-05-19 panietoar

您传递Vue构造{ appRouter }，这是简写形式，{ appRouter: appRouter }。 Vue构造函数期望拥有router属性的对象，而不是appRouter属性。

您需要命名你的路由器对象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>

来源

2017-05-19 19:22:36 thanksd

非常感谢你 – panietoar

我想路径和组件的组合是不正确的

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

来源

2017-05-19 19:21:11

Vue的路由器工作erraticaly

回答

相关问题