为什么我的 Vue Router 没有路由到我的组件？

Question

我刚刚开始使用 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 调试工具确认）并没有加载任何内容。

Answer 1

我犯了这个错误我自己所有的时间时，首先设定了Vue的路由器; 为了渲染路由，您需要<router-view />在模板中包含一个组件。那是在你的路由中定义的组件将被渲染的占位符。

它还可以用于将 props 从包含<router-view />路由组件发送的事件或捕获事件的组件传递给组件。