title: How to create child routes in vue js using Vue-Router and Laravel?
body: <p>My application was working fine, until I changed my router.js file slightly to have child routes, and now my app is breaking, I can't see anything on any routes.</p>
  
  <p>I get this error:
  <code>app.js:191 Uncaught TypeError: Cannot read property 'bind' of undefined</code></p>
  
  <p>I can see that it points to this line:</p>
  
  <pre><code>var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
  </code></pre>
  
  <p>in this file /public/js/app.js inside this block of code:</p>
  
  <pre><code>// on error function for async loading
      __webpack_require__.oe = function(err) { console.error(err); throw err; };
  
      var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
      var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
      jsonpArray.push = webpackJsonpCallback;
      jsonpArray = jsonpArray.slice();
      for(var i = 0; i &lt; jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
  /******/    var parentJsonpFunction = oldJsonpFunction;
  </code></pre>
  
  <p>Has anyone come across something like this? I tried searching on google and there wasn't that much about it, I found something that said they updated their cli@3.0.0-rc.5 to rc.6 and it solved it for that 1 person, but that didn't solve it for me.</p>
  
  <p>Working router.js:</p>
  
  <pre><code>import Vue from 'vue';
  import VueRouter from 'vue-router';
  import Dashboard from './views/Dashboard';
  import Login from './views/Login';
  import Register from './views/Register';
  import Forms from './views/Forms';
  import CandidateProfileCreate from './views/candidate/CandidateProfileCreate';
  import CandidateProfileIndex from './views/candidate/CandidateProfileIndex';
  
  Vue.use(VueRouter);
  
  const routes = [
  
      {
          path: '/',
          name: 'dashboard',
          component: Dashboard
      },
  
      {
          path: '/candidate-profile/create',
          name: 'candidate-profile-create',
          component: CandidateProfileCreate
      },
  
      {
          path: '/candidate-profile',
          name: 'candidate-profile',
          component: CandidateProfileIndex
      },
  
      {
          path: '/login',
          name: 'login',
          component: Login
      },
  
      {
          path: '/register',
          name: 'register',
          component: Register
      },
  
      {
          path: '/forms',
          name: 'forms',
          component: Forms
      }
  ]
  
  const router  = new VueRouter({
      mode: 'history',
      routes: routes,
      linkActiveClass: 'active'
  });
  
  export default router;
  </code></pre>
  
  <p>Getting error, router.js:</p>
  
  <pre><code>import Vue from 'vue';
  import VueRouter from 'vue-router';
  import Home from './views/Home';
  
  Vue.use(VueRouter);
  
  const routes = [
      {
          path: '/home',
          component: Home,
          children: [
              {
                  path: '',
                  name: 'dashboard',
                  component: () =&gt; import('./views/Dashboard.vue')
              },
  
              {
                  path: 'candidate-profile',
                  name: 'candidate-profile-index',
                  component: () =&gt; import('./views/candidate/CandidateProfileIndex')
              },
  
              {
                  path: '/candidate-profile/create',
                  name: 'candidate-profile-create',
                  component: () =&gt; import('./views/candidate/CandidateProfileCreate')
              },
          ],
      },
  
      {
          path: '/login',
          name: 'login',
          component: () =&gt; import('./views/Login.vue')
      },
  
      {
          path: '/register',
          name: 'register',
          component: () =&gt; import('./views/Register.vue')
      },
  
      {
          path: '/forms',
          name: 'forms',
          component: () =&gt; import('./views/Forms.vue')
      }
  ]
  
  const router  = new VueRouter({
      mode: 'history',
      routes: routes,
      linkActiveClass: 'active'
  });
  
  export default router;
  </code></pre>