vue.js - 为什么我的 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 传递给组件。或捕获从您的路由组件发送的事件。