История состояния с кнопкой браузера vue.js

Nick Maddren спросил: 28 марта 2018 в 03:44 в: javascript

Я разрабатываю приложение с Vue и Laravel. Laravel контролирует мои маршруты, и я не использую vue-router.

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

У меня есть этот метод в моем родительском компоненте:

  activateListingForm: function() {
    this.listingFormActive = !this.listingFormActive;
  }

Этот метод запускается кнопкой, которая изменит this.listingFormActive на true или false.

Затем я получаю это в шаблоне компонента:

  <transition name="slide-fade">
    <create-listing-form v-if="listingFormActive"></create-listing-form>
    <listings-table v-else></listings-table>
  </transition>

Проблема, с которой я сталкиваюсь, заключается в том, что некоторые пользователи нажимают кнопку назад браузера, ожидая последнего компонента загружать. Мне интересно, есть ли способ изменить состояние на основе кнопки "Назад"?

Спасибо

1 ответ

Есть решение
Jacob Goh ответил: 28 марта 2018 в 12:39

Это выполнимо. Мне и моим коллегам приходилось делать что-то похожее, работая над этой страницей.

Чтобы это работало,

  • url является источником истины о значении listingFormActive должно быть
  • состояние listingFormActive должно храниться в URL каждый раз, когда оно изменяется.
  • начальное состояние listingFormActive должно быть получено из URL

Сначала посмотрите listingFormActive. При каждом изменении состояния выполняйте pushState, чтобы сохранить его состояние в виде URL-запроса.

watch: {
    listingFormActive: {
        handler(v) {
            history.pushState({
                listingFormActive: v
            }, null, `${window.location.pathname}?listingFormActive=${v}`);
        }
    }
}

Добавьте некоторый служебный метод для получения URL-запроса

methods: {
    currentUrlQuery() {
        return window.location.search
            .replace("?", "")
            .split("&")
            .filter(v => v)
            .map(s => {
                s = s.replace("+", "%20");
                s = s.split("=").map(s => decodeURIComponent(s));
                return {
                    name: s[0],
                    value: s[1]
                };
            });
    },
    getListingFormActive() {
        return this.currentUrlQuery().filter(obj => obj.name === 'listingFormActive').value;
    }
}

исходное состояние listingFormActive должно основываться на том, что вы сохранили в URL

data() {
    return {
        listingFormActive: this.getListingFormActive() == 'true' ? true : false
    }
},