How to create child routes in vue js using Vue-Router and Laravel? - vue.js

Question

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.
I get this error:
app.js:191 Uncaught TypeError: Cannot read property 'bind' of undefined
I can see that it points to this line:
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
in this file /public/js/app.js inside this block of 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 < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
/******/ var parentJsonpFunction = oldJsonpFunction;
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.
Working router.js:
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;
Getting error, router.js:
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: () => import('./views/Dashboard.vue')
},
{
path: 'candidate-profile',
name: 'candidate-profile-index',
component: () => import('./views/candidate/CandidateProfileIndex')
},
{
path: '/candidate-profile/create',
name: 'candidate-profile-create',
component: () => import('./views/candidate/CandidateProfileCreate')
},
],
},
{
path: '/login',
name: 'login',
component: () => import('./views/Login.vue')
},
{
path: '/register',
name: 'register',
component: () => import('./views/Register.vue')
},
{
path: '/forms',
name: 'forms',
component: () => import('./views/Forms.vue')
}
]
const router = new VueRouter({
mode: 'history',
routes: routes,
linkActiveClass: 'active'
});
export default router;

Answer 1

You must create children in object you want.
Like this
if you put path of father element to his children
this page will be open when page create
{
path: '/home',
component: Home,
children: [
{
path: '/home',
name: 'dashboard',
component: () => import('./views/Dashboard.vue')
},
{
path: 'candidate-profile',
name: 'candidate-profile-index',
component: () => import('./views/candidate/CandidateProfileIndex')
},
{
path: '/candidate-profile/create',
name: 'candidate-profile-create',
component: () => import('./views/candidate/CandidateProfileCreate')
},
],
},