Hi guys I have the following route which I try to call different ponents that should load simultaneously using Nested Routes, I have a Navigational Bar (called NavBar) to be loaded together with my Main Form (called MainForm). Somehow the MainForm isn't called, only the NavBar. I also have a form with the absence of a NavBar hence the next route entry. The router contains the following code:

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

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

On the first entry what happens is that the NavBar gets loaded by the app when I go to http://localhost:8080/#/form/sampleid but it doesn't load the MainForm. On the second entry, there are no problems loading the MainForm. What also further my doubts is that I added this to my MainForm.vue:

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

On the second route entry, "heya" displays on the console but on the first it doesn't. How do I fix the nested route I created to load both the NavBar and the MainForm vue files?

Hi guys I have the following route which I try to call different ponents that should load simultaneously using Nested Routes, I have a Navigational Bar (called NavBar) to be loaded together with my Main Form (called MainForm). Somehow the MainForm isn't called, only the NavBar. I also have a form with the absence of a NavBar hence the next route entry. The router contains the following code:

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

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

On the first entry what happens is that the NavBar gets loaded by the app when I go to http://localhost:8080/#/form/sampleid but it doesn't load the MainForm. On the second entry, there are no problems loading the MainForm. What also further my doubts is that I added this to my MainForm.vue:

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

On the second route entry, "heya" displays on the console but on the first it doesn't. How do I fix the nested route I created to load both the NavBar and the MainForm vue files?

• javascript
• vuejs2
• vue-router

Share Improve this question Follow asked May 23, 2018 at 3:18 The BassmanThe Bassman 2,36155 gold badges3030 silver badges4141 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I think you misunderstood how Vue nested route works. You think that a child route ponent can load an entirely different ponent from its parent route, right?

The parent route ponent should be a layout that enpasses the child route ponent. The parent route ponent should have <router-view></router-view> inside. <router-view></router-view> will be replaced by the child route ponent.

This is a pretty good example => https://codesandbox.io/s/qq8zk1n36. See Layout.vue