javascript - 如何在 vue-routers 中使用参数重定向到路由器

Question

我想这样组织我的 vue 路由器:(xxx.com 是我的域)

xxx.com/-> 重定向到 xxx.com/en/home

xxx.com/:lang -> 重定向到xxx.com/:lang/home(:lang是一个param意思语言)

xxx.com/:lang/home -> :lang 的首页

xxx.com/:lang/result/:date -> 某个日期的结果页面

xxx.com/:lang/result -> 重定向到xxx.com/:lang/result/current_date(current_date可以看做new Date())

下面是我的 vue-router 配置

const router = new VueRouter({
    mode: 'history',
    routes: [{
        path: '/',
        redirect: '/en/home',
    },{
        path: '/:lang',
        name: 'lang',
        component: () => import("./Frame.vue"),
        redirect: {name: 'home'},
        children: [{
            path: 'home',
            name: 'home',
            component: () => import("./components/Home.vue")
        },{
            path: 'result/:date',
            name: 'result',
            component: () => import("./components/ResultDay.vue")
        },{
            path: 'result',
            redirect: {name: 'result', params: {date: new Date()}},
        }]
    }]
});

但它无法从 xxx.com/en/result 重定向到 xxx.com/en/result/current_date。 JS 控制台显示错误“[vue-router] 命名路由“result”缺少参数:需要定义“lang””

那么如何将参数 lang 传递给“结果”路由器？

Answer 1

mode: 'history',    routes: [{        path: '/',       //  redirect: '/en/home',       // set default to lang base url         redirect: () => {            return '/en'        }    },{        path: '/:lang',        name: 'lang',        // component: () => import("./Frame.vue"),        component: {            template: '',  // if you have no special codes in Frame.vue        },        // redirect: {name: 'home'},        redirect: to => ({            path: '/'+to.params.lang+'/home',  // user lang passed by :lang        }),        children: [{            path: 'home',            name: 'home',            component: () => import("./components/Home.vue")        },{            path: 'result/:date',            name: 'result',            component: () => import("./components/ResultDay.vue")        },{            path: 'result',            redirect: {name: 'result', params: {date: new Date()}},        }]    }]