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

【问题标题】：Why isn't my Vue Router routing to my component?为什么我的 Vue 路由器没有路由到我的组件？
【发布时间】：2018-10-31 12:35:19
【问题描述】：

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

【问题讨论】：

#app 中有什么内容？您需要一个路由器视图组件。您还需要在某处使用 VueRouter。
像这样：codepen.io/Kradek/pen/QroyMX?editors=1010
您如何导航到/ 路线？如果您改为导航到 /# 路线会发生什么？
@Bert 我错过了<router-view></router-view>。如果您作为答案提交，我会接受。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

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

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

【讨论】：

就是这样。谢谢！
对我来说，是 Vuetify 安装程序从 App.vue 中删除了 router-view 元素。