Блог

Я пытаюсь локализовать 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') }
]
 

router/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
        }
    ] 
});
 

Главное меню.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 () {
верните это.$store.getters[‘i18n/язык’]
},
меню () {
возврат [
{
метка: this.$t(«меню.пользователи.обзор»),
маршрут: «пользователи.индекс»,
},
{
метка: this.$t(«меню.пользователи.создать»),
маршрут: «пользователи.создать»,
},
]
}
}
}

локализации/ru-US.json

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