VueRouter：未调用子组件

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

VueRouter：未调用子组件

VueRouter: Child Component is not called

javascript

vue-router

vuejs2