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 />的组件中的组件或从路由组件发送的catch事件。

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

1 个答案: