Как я могу обнаружить, что Vue $ router.back () выполнен, а не случай пустого стека истории? - PullRequest
Новая
       66

Как я могу обнаружить, что Vue $ router.back () выполнен, а не случай пустого стека истории?

0 голосов
/ 10 ноября 2019

Я использую Vue с VueRouter.

И на моей странице есть кнопка "Назад", сейчас я устанавливаю действие @click для выполнения $router.back(). 

<a class="btn-back" @click="$outer.back()"></a>

Но если страница открывается напрямую (без предыдущего URL-адреса истории), ничего не происходит.

В этом случае я хочу, чтобы страница была заменена на определенное место (например, домашняя страница). Как я могу это сделать?

Я искал технику, чтобы сказать, пуста ли история без удачи.

1 Ответ

0 голосов
/ 10 ноября 2019

Наконец я нашел хитрый способ сделать это.

На самом деле, если в стеке истории есть какая-то другая предыдущая страница, после того, как мы вызовем $router.back(), информация о маршруте должна была быть изменена.

Итак, мы можем проверить маршрут и сказать, изменился ли маршрут после $router.back. Если маршрут не изменен, это означает, что стек истории пуст, тогда вместо этого мы делаем $router.replace().

В целом, я написал такой метод: 

import _ from 'lodash'

export default {
  // ...
  methods: {
    backOrRedirect (route) {
      const vm = this
      const originRoute = { ...vm.$route }
      vm.$router.back()
      // Of course, we must detect until a $nextTick is reached
      vm.$nextTick(() => {
        // If the route is not changed, we do the redirect
        if (_.isEqual(originRoute, vm.$route)) {
          // Redirect to the home path by default
          vm.$router.replace(route || '/')
        }
      })
    }
  }
  // ,,,
}

Я использую lodash для сравнения между исходным маршрутом и объектом newRoute.

Итак, мы можем легко вызвать vm.backOrRedirect(url), чтобы запустить $router.back(), который обязательно вернется к перенаправлению на некоторую страницу, когдастек истории пуст.

...