VueRouter：未调用子组件

Posted 2021-04-06

大家好我有以下路线，我尝试调用应使用嵌套路由同时加载的不同组件，我有一个导航栏（称为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但是它没有加载MainForm时，应用程序会加载NavBar。在第二个条目，加载MainForm没有问题。我还怀疑的是，我将其添加到我的MainForm.vue中：

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

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

答案

我想你误解了Vue嵌套路由是如何工作的。您认为子路由组件可以从其父路由加载完全不同的组件，对吧？

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

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