Блог

Главная - Вопросы по программированию - Локализованные URL-адреса в маршрутизаторе vue не работают и возвращают ошибку

Локализованные URL-адреса в маршрутизаторе vue не работают и возвращают ошибку

#vue-router #vuejs3

Вопрос:

Пытаюсь добавить языковой префикс к URL-адресу с помощью vue-маршрутизатора, но он повторяет ошибку с сообщением : Uncaught Error: Missing required param "locale" Я пытаюсь добавить маршруты, поддерживающие языковые префиксы, такие как en, de, nl, fr и так далее…

Я вижу, что использую дочерние маршруты, которые мне на самом деле не нужны, я думаю…!

 example.com/en/users
example.com/nl/users
example.com/fr/users

routes.js

 const routes = [
    {
        path: "/",
        redirect: 'en'
    },
    {
        path: '/:locale',
        //path: '/:locale?', // this will work but it wont render the component
        name:'locale',
        component: {
            template: '<router-view />'
        },
        children:[
            { path: 'welcome', name: 'dashboard', component: page('Dashboard.vue'),
            },
            { path: 'users/index', name: 'users.index', component: page('Users/Index.vue'),
                children:[
                    { path: 'create', name: 'users.create', component: page('Users/Create.vue') } 
                ]
            },
        ]
    },
]

router.js

 const router = createRouter({
    history: createWebHistory(),
    routes,
    base: process.env.BASE_URL,
});

router.beforeEach((to, from, next) => {
    next();
})

Комментарии:

1. как насчет path: ':locale',

2. Неперехваченная ошибка: Пути маршрута должны начинаться с «/»: «:языковой стандарт?» должно быть «/:языковой стандарт?».

Ответ №1:

Вы можете получить эту ошибку в Vue 3, если в вашем компоненте есть <router-link> параметры, в которых отсутствует параметр локали.

Например, если появится такая разметка DOM, как эта:

 <router-link :to="{ name: 'dashboard' }">
    Dashboard
</router-link>

измените его на:

 <router-link :to="{ name: 'dashboard', params: { locale: 'en' } }">
    Dashboard
</router-link>

Ошибка может быть вызвана любым компонентом, который пытается загрузить. Например, у вас может быть TopNavBar.vue компонент, который отображается вместе с вашим предполагаемым компонентом, поэтому проверьте это.

Метки: