routes - Vue-router 4 - parent redirect : Maximum call stack exceeded

Question

I've done this multiple times, but with the new vue-router(v4.0.3) i get an Maximum call stack exceeded. I've got an layout component with a router-view. I redirect the parent route to the child route, so i can use the active classes on the <router-link/>.

Is there something wrong with my code?

Layout template

<template>
    <div class="layout">
        <transition name="animation-fade">
            <router-view />
        </transition>
    </div>
</template>

Router config courses.ts

export default [{
    path: '/courses',
    name: 'courses',
    redirect: '/courses/all',
    template: '<router-view/>',
    children: [
        {
            path: 'all',
            name: 'coursesAll',
            component: Courses,
        },
        {
            path: ':id',
            name: 'courseSingle',
            component: CourseSingle,
        }
    ]
}]

Router

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes (includes course routes)
})

router.beforeEach((to, from, next) => {
    next()
})

export default router;

question from:https://stackoverflow.com/questions/65829030/vue-router-4-parent-redirect-maximum-call-stack-exceeded

Answer 1

Waitting for answers