CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-router
dubloons
dubloons

Reputation: 1140

Why isn't my Vue Router routing to my component?

I'm just getting started with Vue, so please forgive the potentially silly question. I'm trying to avoid using NPM.

I have a component defined (tested and working outside of routing so I've omitted the template):

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();
    }
  }
});

I then define my routes, router, and app:

var routes = [
        {path:'/', component: TaxonomyComponent},
    ];

    const router = new VueRouter({
      routes: routes
    });

    const app = new Vue({
      router
    }).$mount('#app');

I go to / (confirmed by Vue debug tools) and nothing is loaded.

Upvotes: 4

Views: 4403

Answers (1)

Bert
Bert

Reputation: 82489

I make this mistake myself all the time when first setting up the Vue router; in order for a route to render, you need to include a <router-view /> component in your template. That is the placeholder where the components defined in your route will be rendered.

It can also be used to pass props to the components from the component containing the <router-view /> or catch events sent from your route components.

Upvotes: 5

Related Questions