vue-router - способ сохранить параметры запроса от старого маршрута к новому маршруту - PullRequest
Новая
       17

vue-router - способ сохранить параметры запроса от старого маршрута к новому маршруту

0 голосов
/ 08 мая 2018

Для каждого маршрута в моем приложении, если есть определенный параметр запроса, назовем его userId, я бы хотел, чтобы следующий маршрут также содержал этот параметр запроса.

Одним из решений является изменение каждые router-link и router.push для добавления этого параметра запроса, но я бы хотел использовать router.beforeEach для решения этой проблемы.

Я попробовал это, но запускается бесконечный цикл: 

router.beforeEach((to, from, next) => {
  if (from.query.userId) {
    next({
      path: to.path,
      query: Object.assign({}, to.query, from.query.userId),
    })
  }
  next()
})

Есть ли какой-либо способ в vue-router, который позволяет мне сохранить параметр запроса, если он существует на предыдущем маршруте?

1 Ответ

0 голосов
/ 20 января 2019

Я наткнулся на ту же проблему, и вот мое производственное решение: 

router.beforeEach((to, from, next) => {
    let requiresAuth = (to.meta.hasOwnProperty('requiresAuth') ? to.meta.requiresAuth : true);

    //... comment
    if (!store.getters.isAuthenticated() && requiresAuth) {
        next({name: 'login', params: {...{redirect: to.name}, ...to.params}});
        return;
    } else if (store.getters.isAuthenticated() && !store.getters.isDataPreloaded() && to.name !== 'preloading') {
        //... comment
        next({name: 'preloading', params: {...{redirect: to.name}, ...to.params}});
        return;
    }

    next();
})

Неважно, что вы используете - запрос или параметры. Не забывайте, что вы можете использовать необязательные параметры, чтобы сообщить при перенаправлении, что что-то происходит. Вы можете добавить необязательный param как redirected и проверить его в своем методе beforeEach, если для него установлено значение true - выполнить одно действие, если для него установлено значение false - выполнить другое действие.

Помните, что с помощью свойства params вы можете обмениваться между маршрутами абсолютно любыми данными (объектами JS), которые вам нужны, не показывая эти данные вашим пользователям в URL-адресах.

Позвольте мне объяснить, почему и как работает мой код:

  1. Пользователь открывает страницу example.com/my-private-zone/dashboard/reports
  2. Система проверяет, аутентифицирован ли он уже, если нет - сохраните маршрут from и перенаправьте на страницу login - example.com/login.
  3. Пользователь аутентифицируется
  4. Пользователь перенаправляется на страницу preloading (example.com/preloading), где предварительно загружены все необходимые JS-скрипты.
  5. Пользователь перенаправляется на маршрут с 0 шага. Как вы можете видеть, я passing пользовательская точка входа (как redirect param) для окончательного перенаправления без изменения URL, который отображается для пользователя.

Ваш код также должен быть отлично, вы забыли добавить оператор return в ветку if: 

router.beforeEach((to, from, next) => {
  if (from.query.userId) {
    next({
      path: to.path,
      query: Object.assign({}, to.query, from.query.userId),
    })
    return;
  }
  next()
})

Надеюсь, это поможет!

...