IT이야기

Vue 라우터가 구성 요소로 라우팅되지 않는 이유

cyworld 2022. 3. 11. 22:32
반응형

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

반응형