VueRouter：未调用子组件答案

【问题标题】：VueRouter: Child Component is not calledVueRouter：未调用子组件
【发布时间】：2018-05-23 03:18:10
【问题描述】：

大家好，我有以下路线，我尝试调用应该使用嵌套路线同时加载的不同组件，我有一个导航栏（称为 NavBar）与我的主窗体（称为 MainForm）一起加载。不知何故没有调用 MainForm，只有 NavBar。我还有一个没有 NavBar 的表单，因此是下一个路由条目。路由器包含以下代码：

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

export default new Router({
  routes: [
    {
      path: '',
      name: 'NavBar',
      component: NavBar,
      children: [
        {
          path: '/form/:id',
          component: MainForm
        }
      ]
    },
    {
      path: '/formNoNavBar/:id',
      component: MainForm
    }
   ]
});

在第一个条目中，当我转到http://localhost:8080/#/form/sampleid 时，应用程序会加载 NavBar，但它不会加载 MainForm。在第二个条目上，加载 MainForm 没有问题。更让我怀疑的是我将它添加到我的 MainForm.vue 中：

export default {
  name: 'MainForm',
  created: function () {
    console.log('heya');
  } ....

在第二个路由条目中，控制台上会显示“heya”，但在第一个路由条目上不会。如何修复我创建的嵌套路由以同时加载 NavBar 和 MainForm vue 文件？

【问题讨论】：

标签： javascript vuejs2 vue-router

【解决方案1】：

我想你误解了 Vue 嵌套路由的工作原理。您认为子路由组件可以加载与其父路由完全不同的组件，对吗？

父路由组件应该是包含子路由组件的布局。父路由组件内部应该有<router-view></router-view>。 <router-view></router-view> 将被子路由组件替换。

这是一个很好的例子 => https://codesandbox.io/s/qq8zk1n36。见Layout.vue

【讨论】：