javascript - 路由 : Child Component is not called

Question

大家好，我有以下路线，我尝试使用嵌套路线调用应同时加载的不同组件，我有一个导航栏(称为 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 文件？

Answer 1

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

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

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