반응형
Vue 라우터가 구성 요소로 라우팅되지 않는 이유
나는 이제 막 Vue를 시작했으니까, 바보 같은 질문을 용서해 줘.나는 NPM을 사용하지 않으려고 노력하고 있어.
구성 요소가 정의되어 있음(라우팅 외부에서 테스트 및 작업하여 템플릿을 생략함):
var TaxonomyComponent = Vue.component('taxonomy', {
template: '#taxonomy-component',
data: function(){
return {
taxa: {
results: [],
count: 0
},
page: 1,
page_size: 25,
loading: true
};
},
mounted(){
this.getData();
},
methods:{
getData: function(){
var self = this;
self.loading = false;
self.taxa = goGetDataElsewhere();
}
},
computed: {
max_page: function(){
return Math.ceil(this.taxa.count / this.page_size);
}
},
watch:{
page: function(){
this.loading = true;
this.getData();
}
}
});
그런 다음 경로, 라우터 및 앱을 정의하십시오.
var routes = [
{path:'/', component: TaxonomyComponent},
];
const router = new VueRouter({
routes: routes
});
const app = new Vue({
router
}).$mount('#app');
나는 간다/
(Vue 디버그 도구로 확인됨) 아무것도 로드되지 않음.
나는 Vue 라우터를 처음 설치할 때 항상 이 실수를 한다. 경로를 렌더링하기 위해서는<router-view />
템플릿의 구성 요소.경로에 정의된 구성요소가 렌더링되는 플레이스홀더 입니다.
또한 소품을 포함하는 구성 요소에서 구성 요소로 전달하기 위해 사용할 수 있다.<router-view />
또는 경로 구성요소로부터 전송된 이벤트를 수신할 수 있다.
참조URL: https://stackoverflow.com/questions/50455865/why-isnt-my-vue-router-routing-to-my-component
반응형
'IT이야기' 카테고리의 다른 글
Vue 코어 UI 선택 값을 설정하는 방법 (0) | 2022.03.11 |
---|---|
여러 탭의 활성 탐색바를 시각화 및 vue-requency 활성 탐색기 (0) | 2022.03.11 |
Quasar 레이아웃 내에서 슬롯을 작동시키는 방법 (0) | 2022.03.11 |
Python에서 사전 키를 목록으로 반환하는 방법? (0) | 2022.03.11 |
Vuetify 버튼의 텍스트 색상을 변경하는 방법 (0) | 2022.03.11 |