为什么我的 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 /> 组件。这是将呈现路由中定义的组件的占位符。

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

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

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

vue.js

vue-router

vue-component

vuejs2