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

【问题标题】：How to redirect to a router with params in vue-routers如何在 vue-routers 中使用参数重定向到路由器
【发布时间】：2021-06-13 13:34:25
【问题描述】：

我想这样组织我的 vue 路由器：（xxx.com 是我的域）

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

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

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] missing param for named route "result": Expected "lang" to be defined"

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

【问题讨论】：

如果你想实现支持i18n的网站，你可以试试这个：kazupon.github.io/vue-i18n

标签： javascript vue.js vue-router

【解决方案1】：

模式：'历史'，路线：[{ 小路： '/'， // 重定向：'/en/home', // 将默认设置为 lang base url 重定向：（）=> { 返回'/en' } },{ 路径：'/：lang'，名称：'郎'， // 组件：() => import("./Frame.vue"), 零件： { template: '', // 如果 Frame.vue 中没有特殊代码 }, // 重定向：{name: 'home'}, 重定向：到 => ({ path: '/'+to.params.lang+'/home', // 用户 lang 通过 :lang }), 孩子们： [{ 路径：'家'，名称：'家'，组件：() => import("./components/Home.vue") },{ 路径：'结果/：日期'，名称：'结果'，组件：() => import("./components/ResultDay.vue") },{ 路径：'结果'，重定向：{名称：'结果'，参数：{日期：新日期（）}}， }] }]

【讨论】：