title: default children route with vue-router
body: <p>I have a Vue 2.x application and I'm using vue-router to handle the routing.</p>
  
  <p>In some scenario, I have to display directly a children vue. My template is the following:</p>
  
  <pre><code>| voice 1 | voice 2 | voice 3 |
  
      | submenu 1 | submenu 2 | submenu 3 |
  
  |
  | content 1
  |
  </code></pre>
  
  <p>So basically I have a menu, when you select a menu voice the relative submenu is displayed, when you select a submenu voice the relative content is displayed.</p>
  
  <p>The routeing system follows the menu structure so if you go to <code>/voice1/submenu1</code> you should display the <code>content 1</code>, if you click to submenu2 then you go to <code>/voice1/submenu2</code> and display <code>content 2</code> and so on and so forth.</p>
  
  <p>When the user logs in, I don't want to present an empty page, but I want the route to be already populated with default components (in this case <code>voice 1</code>, <code>submenu 1</code>, <code>content 1</code>), but I don't know how to do that. For now I solved the problem adding this in my route interceptor:</p>
  
  <pre><code>router.beforeEach((to, from, next) ⇒ {
    const token = store.getToken();
  
    const tokenIsValid = validateToken(token);
    const routeDoesntNeedAuth = routeWithoutAuth.indexOf(to.fullPath) &gt; -1;
  
    if (tokenIsValid || routeDoesntNeedAuth) {
      if (to.fullPath === '/') {
        next('/voice1/submenu1');       // &lt;- this line does the trick
      }
  
      next();
    } else {
      next('/login');
    }
  });
  </code></pre>
  
  <p>But I'm sure there's a better way to do this. My route system is the following:</p>
  
  <pre><code>export default new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: AppWrapper,
        children: [
          {
            path: '/voice1',
            components: {
              default: PageWrapper,
              subMenu: VoiceFirstSubMenu,
            },
            children: [
              {
                path: 'submenu1',
                components: {
                  mainContent: ContentOne,
                },
              },
              {
                path: 'submenu2',
                components: {
                  mainContent: ContentTwo,
                },
              },
              {
                path: 'submenu3',
                components: {
                  mainContent: ContentThree,
                },
              },
            ],
          },
        ],
      },
      {
        path: '/login',
        component: Login,
      },
    ],
  });
  </code></pre>
  
  <p>How can I solve this?</p>
  
  <p>Divine's question is correct, the problem was that I had this line of code that was redirecting all my routes to <code>/</code>:</p>
  
  <pre><code>this.$router.push('/');
  </code></pre>
  
  <p>In a wrapper component that contains the whole application. Once removed that line everything worked perfectly.</p>