如何解决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 举报,一经查实,本站将立刻删除。