Vue Router嵌套路由问题：子组件MainForm未加载

这问题我之前也碰到过，核心原因有两个：父组件缺少<router-view>容器和子路由路径配置错误，咱们一步步来解决：

1. 给NavBar组件添加<router-view> #

嵌套路由的子组件（这里是MainForm）需要在父组件（NavBar）的<router-view>标签中渲染，没有这个容器的话，Vue Router根本不知道该把MainForm放在哪里，自然不会触发它的生命周期钩子。

修改你的NavBar组件模板，加上<router-view>：

<template>
  <div class="nav-bar">
    <!-- 这里是你原有的导航栏内容 -->
    <p>导航栏内容...</p>
    <!-- 必须添加这个标签，用来渲染子路由组件 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'NavBar'
}
</script>

2. 修正路由配置的路径问题 #

你之前的子路由用了绝对路径/form/:id，这会让它直接匹配根路由下的路径，而不是作为NavBar的子路由。我们需要改成相对路径，或者调整父路由的路径结构，这里给你两种可行方案：

方案一：保持父路由为空路径，子路由用相对路径 #

import MainForm from '@/components/MainForm'; 
import NavBar from '@/components/NavBar'; 
Vue.use(Router); 

export default new Router({ 
  routes: [ 
    { 
      path: '', 
      component: NavBar, 
      children: [ 
        // 去掉开头的斜杠，使用相对路径
        { path: 'form/:id', component: MainForm } 
      ] 
    }, 
    { path: '/formNoNavBar/:id', component: MainForm } 
  ] 
}); 

方案二：调整父路由路径为/form，子路由用/:id（结构更清晰） #

import MainForm from '@/components/MainForm'; 
import NavBar from '@/components/NavBar'; 
Vue.use(Router); 

export default new Router({ 
  routes: [ 
    { 
      path: '/form', 
      component: NavBar, 
      children: [ 
        // 子路由相对父路由，直接写`:id`即可
        { path: ':id', component: MainForm } 
      ] 
    }, 
    { path: '/formNoNavBar/:id', component: MainForm } 
  ] 
}); 

为什么之前的配置不生效？ #

• 没有<router-view>：子组件没有渲染的容器，即使路由匹配成功也无法显示，生命周期钩子自然不会触发。
• 子路由用绝对路径：/form/:id会被当成独立的根路由，和父路由NavBar没有关联，所以只有NavBar渲染，MainForm不会被加载。

现在访问http://localhost:8080/#/form/sampleid，你会看到NavBar和MainForm同时渲染，MainForm的created钩子也会输出heya啦～

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