Vue i18n 本地化路径未更新为正确的翻译 URL

问题描述

我正在尝试使 url 本地化，文本有效，但 url 部分不起作用。切换语言时，文本将切换到所选语言，但路由保持不变，只有当我刷新页面时，翻译的 url 才会作为 href 元素出现。我知道 js 文件不是反应性的，所以我该如何创建它。我一直在寻找一些好的教程，但只能找到旧的东西。我正在使用 vue 3、vue 路由器 4 和 vue i18n 9

router/routes.js

import i18n from '../plugins/i18n.js'

const { t } = i18n.global;
// at load all paths work and point to the correct translations
const routes = [
    { path: t('routes.users.index'),name: 'users.index',component: page('Users/Index.vue') },{ path: t('routes.users.create'),name: 'users.create',component: page('Users/Create.vue') }
]

路由器/index.js

const languageSlug = store.getters['i18n/language']//contains updated values

const router = createRouter({
    history: createWebHistory(),base: process.env.BASE_URL,routes: [
        {
            path: `/:lang(${languageSlug})?`,component: () => import('../Pages/Page.vue'),children: routes
        }
    ] 
});

mainMenu.vue

<template>
    <nav>
        <ul>
            <li v-for="(item,index) in menu" :key="item.label" :data-index="index">
                <router-link :to="{ name: item.route,params: { lang: langSlug } }">
                    <span>
                        {{item.label}}
                    </span>
                </router-link>
            <li>
        </ul>
    </nav>
</template>

导出默认{ 计算：{ langSlug () { 返回 this.$store.getters['i18n/language'] },菜单（） { 返回 [ { 标签：this.$t('menu.users.overview'),路线：'users.index'， },{ 标签：this.$t('menu.users.create'),路线：'users.create'， },] } } }

locales/en-US.json

"routes":{
    "users" : {
        "index" : "users","create" : "users/create"
    }
},

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue-i18n vue.js vuejs3