뷰 라우터는 erraticaly

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가 발생합니다. 라우터가 렌더링 될 때 경로가 정의되지 않았습니다.

다른 사람이 내가 여기에없는 것을보고 있습니까?

Answer 1

당신은 { appRouter: appRouter }에 대한 속기입니다 Vue 생성자 { appRouter }을 전달하는

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

정확하지라고 생각합니다. Vue 생성자는 속성이 아닌 router 속성이있는 개체를 필요로합니다.

Answer 2

나는 경로 및 구성 요소의 조합이