Skip to content

Conditional route for children routes in VueJS

I wonder how to redirect a children route conditionally. I’ve tried many ways but none of them works.

I’m using a state from the store as the condition to redirect the children routes. I’ve exported my store from the file it is in and import it in the routes.js:

import store from ‘@/store’

Here is the code to handle the routes:

path: '/import',
component: Layout,
redirect: '/import/table',
name: 'Import',
meta: { title: 'Import', icon: 'el-icon-right' },
children: [
    path: 'tree',
    name: 'Tree',
    component: () => 
    beforeEach: (to,from,next) => {
      //store.state.userRole = 'Admin' redirect the route, otherwise not redirect. 
      if(store.state.userRole = 'Admin') {
      else {
      meta: { title: 'Create form', icon: 'el-icon-circle-plus-outline' },

    path: 'table',
    name: 'Table',
    component: () => import('@/views/table/importList'),
    meta: { title: 'List', icon: 'el-icon-document' },


The proper name of the per-route guard is beforeEnter – not beforeEach.