Is there a way to conditionally redirect a children route? I've experimented with various methods but haven't had any success.
Currently, I am using a state from the store as the condition to redirect the children routes. I have exported my store from its file and imported it into routes.js:
import store from '@/store'
Below is the code snippet for managing the routes:
{
path: '/import',
component: Layout,
redirect: '/import/table',
name: 'Import',
meta: { title: 'Import', icon: 'el-icon-right' },
children: [
{
path: 'tree',
name: 'Tree',
component: () =>
import('@/views/tree/import'),
beforeEach: (to,from,next) => {
//store.state.userRole = 'Admin' redirect the route, otherwise not redirect.
if(store.state.userRole = 'Admin') {
next();
}
else {
next(false);
}
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' },
},
]
}