Добавление определенных параметров запроса из предыдущего маршрута в новый маршрут в маршрутизаторе Vue
При передаче параметров запроса из предыдущего маршрута в новый маршрут через навигационные щитки beforeEach,
столкнулся со следующей ошибкой бесконечного цикла
Detected an infinite redirection in a navigation guard
Требование: Для любого заданного действительного маршрута в приложении Vue, когда ему передается параметр запроса (Например: ваш сайт/целевая страница/?displayNav=true) Последующие изменения маршрута должны сохранять указанный выше параметр запроса.
Использование "vue-router": "^4.1.6"
Поскольку это необходимо для всех допустимых маршрутов в приложении Vue, Следовал подходу навигационных охранников, используя beforeEach Вот кодовый блок, который перехватывает каждое изменение маршрута и добавляет displayNav, если он присутствует.
// guards.js
export const appendQueryParamsToRoute = (to, from, next) => {
const query = Object.assign({}, to.query)
// Check if the displayNav param exists in the previous route's query params
if (from.query['displayNav']) {
query['displayNav'] = 'true'
}
next({
path: to.path,
query
})
}
// router.js
router.beforeEach(appendQueryParamsToRoute)
Ответы 1
Вы на правильном пути. Ваша ошибка может быть связана с конфликтами запросов. Вы можете сначала попробовать проверить параметры запроса в обоих направлениях, а затем передать их:
// guards.js
export const persistRouteQuery = (to, from, next) => {
const query = { ...to.query, ...from.query }
if (!Object.keys(to.query).length && Object.keys(from.query).length) {
next({ ...to, query })
} else {
next()
}
}
// router.js
router.beforeEach(persistRouteQuery)
Вот более надежное решение, основанное на предыдущем коде и вашем примере, которое проходит только по явно определенным запросам маршрута:
// guards.js
const persistentQueries = ['displayNav']
const hasQuery = (route, queryKeys = [])=> {
const keys = Object.keys(route.query)
const hasKeys = !!keys.length
if (queryKeys.length && hasKeys) {
return keys.some((k) => queryKeys.includes(k))
}
return hasKeys
}
const toWithQuery = (to, path, queryKeys) => {
const query = to.query
const params = to.params
const withQuery = queryKeys.reduce((keys, key) => {
if (query[key]) {
keys[key] = query[key]
}
return keys
}, {})
return { path, params, query: withQuery }
}
export const persistRouteQuery = (to, from, next) => {
if (!hasQuery(to) && hasQuery(from, persistentQueries)) {
next(toWithQuery({ ...to, query: from.query }, to.path, persistentQueries))
} else {
next()
}
}
// router.js
router.beforeEach(persistRouteQuery)
Существует также другая тема о передаче параметров запроса в дочерние маршруты, которые могут вам помочь.
Это работает! Спасибо Сэмюэлю за вашу помощь. Я пропустил добавление (базового) условия appendQueryParamsToRoute, что привело к бесконечным перенаправлениям. Условие заключается в том, что если TO и FROM различны, перейдите к next()