Vue.js子路由组件无法渲染问题求助

这是嵌套路由最容易踩的坑之一——你的父组件Admin里没有添加子路由的渲染出口<router-view>！当使用嵌套路由时，Vue需要明确知道把子组件渲染到父组件的哪个位置，这个<router-view>就是专门用来承载子路由组件的容器。

具体修复步骤： #

1. 在父组件Admin的模板中添加<router-view>
   打开你的Admin组件文件，在模板里合适的位置插入<router-view>标签，比如：

   <template>
     <div class="admin-page">
       <!-- 父组件自身的内容，比如导航、侧边栏等 -->
       <div class="admin-sidebar">...</div>
       <!-- 子路由组件将在这里渲染 -->
       <router-view></router-view>
     </div>
   </template>
   

   没有这个标签的话，即便URL正常跳转，Vue也找不到地方渲染子组件，自然只会显示父组件的内容。

2. 确认路由配置无需修改
   你原本的嵌套路由配置是完全正确的：

   { 
     path:'/admins', 
     name:'admin.admins', 
     component: Admin, 
     children: [ 
       { path:'add', name:'admin.add', component:addAdmin }, 
       { path:'edit/:id', name:'admin.edit', component:editAdmin } 
     ] 
   }
   

   子路由的path用相对路径（不带开头的/）是正确的，它会自动和父路由的path拼接成/admins/add、/admins/edit/:id，和你用router-link通过name跳转的逻辑完全匹配。

3. 验证跳转逻辑
   你当前的router-link写法没问题：

   <router-link :to="{ name:'admin.add' }"><i class="fa fa-plus"></i> Add Admin</router-link>
   

   也可以用路径跳转来测试，结果应该是一致的：

   <router-link :to="{ path:'/admins/add' }"><i class="fa fa-plus"></i> Add Admin</router-link>
   

额外排查点（如果上述步骤无效的话）： #

• 检查是否有全局路由守卫（比如beforeEach）拦截了子路由的跳转
• 确认addAdmin和editAdmin组件是否正确导入，没有语法错误
• 查看浏览器控制台是否有报错信息，比如组件未找到的错误

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