Создайте роутер-ссылку с глобальным языковым параметром
У меня есть набор маршрутов, которые выглядят так, где язык не является обязательным. Если не установлен, по умолчанию будет английский:
- /поиск
- / нл / поиск /
- / de / search /
Теперь я хочу сгенерировать маршруты с помощью элемента router-link.
<router-link :to = "{
name: 'search-map',
params: { language: $language }
}">
testlink
</router-link>
Это работает, но язык - это то, что я уже установил глобально во Vue. Очевидно, я бы не хотел постоянно передавать параметр на router-link, чтобы это делалось автоматически.
Я попытался использовать средства навигации, но это, похоже, не работает:
router.beforeEach((to, from, next) => {
to.params.language = Vue.prototype.$language;
next();
});
Есть ли другой способ сделать это, чтобы мне не приходилось указывать языковой параметр на каждом router-link? Или должен работать штурман?
Ссылки на мой маршрутизатор не будут сгенерированы должным образом, хотя, допустим, я использую этот путь маршрута path: '/:language?/:entity/',, тогда как мой router-link должен знать, как сгенерировать для него правильный путь, без необходимости вручную устанавливать свойство params для каждого компонента router-link?
Хорошо, необязательный параметр :language? не будет унаследован.
В качестве альтернативы вы можете определить все свои маршруты как дочерние по отношению к маршруту, определенному для языка.
@Derek правда, но в моем приложении язык en должен по умолчанию использовать маршрут /search/ вместо /en/search/, это своего рода исключения вынуждают меня использовать навигационную защиту.
Ответы 1
как насчет того, если to не содержит параметра language, добавьте его в next()
router.beforeEach((to, from, next) => {
if (!to.params.hasOwnProperty('language')) {
next({
...to,
params: {
...to.params,
language: Vue.prototype.$language
}
})
} else {
next()
}
})
Кажется, это работает. Я пробовал что-то подобное, установив язык непосредственно в объекте to, но я думаю, вам нужно вручную установить его в next.
Вместо этого я бы выбрал language: from.params.language || Vue.prototype.$language, но это зависит от ваших требований.
Vue-router наследует параметры от текущего маршрута, поэтому вам не нужно указывать параметр
languageдля каждого<router-link>.