求助：Vue Router无法路由至自定义组件的问题排查

别担心，刚接触Vue遇到这类问题太正常了，我帮你梳理下最可能的原因和解决办法：

1. 最容易忽略的核心问题：页面缺少 <router-view> 标签 #

路由匹配的组件需要通过 <router-view> 这个“占位符”来渲染到页面上。你之前在路由外测试组件是直接用 <taxonomy> 标签调用，但路由模式下，Vue Router必须依赖这个标签来承载匹配到的组件。

你需要确保挂载Vue的容器（也就是#app）里包含这个标签：

<div id="app">
  <router-view></router-view>
</div>

这大概率是你组件没加载的关键原因。

2. 确认Vue Router的引入是否正确 #

因为你不用NPM，通过CDN引入时必须保证先引入Vue，再引入Vue Router，而且版本要严格匹配：

• Vue 2 对应 Vue Router 3.x版本
• Vue 3 对应 Vue Router 4.x版本

如果引入顺序错误或者版本不兼容，路由系统根本无法正常初始化，自然加载不了组件。比如正确的CDN引入顺序应该是：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3/dist/vue-router.js"></script>

3. 检查组件注册与路由配置的匹配 #

你用Vue.component('taxonomy', {...})全局注册组件是没问题的，路由里用component: TaxonomyComponent也正确，不过你也可以试试直接用组件名字符串的写法，排除变量引用的潜在问题：

var routes = [ 
  {path:'/', component: 'taxonomy'}, // 用组件名代替变量
]; 

4. 小细节优化：getData里的loading逻辑 #

虽然这不是组件不渲染的直接原因，但你当前的getData里一开始把loading设为false的逻辑反了，应该先设为true表示正在加载，等数据获取完成再改成false：

getData: function(){ 
  var self = this; 
  self.loading = true; // 先标记为加载中
  // 假设goGetDataElsewhere是异步请求（比如AJAX）
  axios.get('/your-api-url')
    .then(res => {
      self.taxa = res.data;
      self.loading = false;
    })
  // 如果是同步数据，也应该先设loading为true再赋值
  // self.taxa = goGetDataElsewhere();
  // self.loading = false;
} 

我整理了一个完整的可运行示例，你可以参考测试：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Taxonomy Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3/dist/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <router-view></router-view>
  </div>

  <template id="taxonomy-component">
    <div class="taxonomy-container">
      <h2>Taxonomy List</h2>
      <div v-if="loading" class="loading">Loading data...</div>
      <div v-else>
        <p>Total taxa: {{ taxa.count }}</p>
        <ul>
          <li v-for="taxon in taxa.results" :key="taxon.id">{{ taxon.name }}</li>
        </ul>
        <button 
          v-if="page < max_page" 
          @click="page++"
          :disabled="loading"
        >
          Next Page ({{ page }}/{{ max_page }})
        </button>
      </div>
    </div>
  </template>

  <script>
    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 = true;
          // 模拟异步数据请求，替换成你的goGetDataElsewhere
          setTimeout(() => {
            const start = (self.page - 1) * self.page_size + 1;
            self.taxa = {
              results: Array.from({length: self.page_size}, (_, i) => ({
                id: start + i,
                name: `Taxon ${start + i}`
              })),
              count: 100
            };
            self.loading = false;
          }, 600);
        } 
      }, 
      computed: { 
        max_page: function(){ 
          return Math.ceil(this.taxa.count / this.page_size); 
        } 
      }, 
      watch:{ 
        page: function(){ 
          this.getData(); 
        } 
      } 
    }); 

    var routes = [ 
      {path:'/', component: TaxonomyComponent}, 
    ]; 
    const router = new VueRouter({ routes }); 
    const app = new Vue({ router }).$mount('#app'); 
  </script>
</body>
</html>

先从检查<router-view>标签开始排查，这是最常见的触发这类问题的原因，应该能解决你的组件不加载的情况～

内容的提问来源于stack exchange，提问作者dubloons