[Vuejs]-VueJS Router History Mode on NGinx

by

0👍

You have to remove the slash ‘/’ in the path of the children when using nested routes,

so your vue-router config will be something like this:

const routes = [
    {
        path: '/:lang',
        component: {
            template: '<router-view></router-view>',
        },
        beforeEnter: Trans.routeMiddleware,
        children: [
            {

                path: '',
                name: ROUTER_NAME.QUIZ,
                component: Quiz
            }, {
                path: 'results',
                name: ROUTER_NAME.QUIZ_RESULTS,
                component: QuizResults
            }, {
                path: 'success',
                name: ROUTER_NAME.QUIZ_SUCCESS,
                component: QuizSuccess
            }
        ]
    },
    {
        path: '/confirmation/:quizId',
        name: ROUTER_NAME.QUIZ_CONFIRMATION,
        component: QuizConfirmation,
        props: true
    },
    {
        // Redirect user to supported lang version.
        path: '*',
        redirect(to) {
            return Trans.defaultLanguage
        }
    }
]

you can check the vue-router docs Here.

Leave a comment