javascript - State history with browser back button vue.js

I am developing an application with Vue and Laravel. Laravel is controlling my routes and I'm not using the vue-router.

I am conditionally loading some ponents based on the state of an object in my parent ponents data.

I have this method in my parent ponent:

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

This method is triggered by a button that will change this.listingFormActive to true or false.

I then have this in the template of the ponent:

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

A problem that I am having is that some users are clicking the browser back button expecting the last ponent to load. I'm wondering if there is a way to change the state based on the back button?

Thanks

I am developing an application with Vue and Laravel. Laravel is controlling my routes and I'm not using the vue-router.

I am conditionally loading some ponents based on the state of an object in my parent ponents data.

I have this method in my parent ponent:

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

This method is triggered by a button that will change this.listingFormActive to true or false.

I then have this in the template of the ponent:

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

A problem that I am having is that some users are clicking the browser back button expecting the last ponent to load. I'm wondering if there is a way to change the state based on the back button?

Thanks

Share Improve this question edited Apr 21, 2018 at 22:04 asked Apr 21, 2018 at 17:24 Nick Maddren 6614 gold badges9 silver badges21 bronze badges

I think this is what you'd want to use stackoverflow./questions/1462719/… – Derek Pollard Commented Apr 21, 2018 at 22:19

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

It's doable. My colleagues and I had to do something similar while working on this page.

For it to work,

url is the source of truth of what the value of listingFormActive should be
the state of listingFormActive should be stored in url everytime it changes.
the initial state of listingFormActive should be retrieved from url

First, watch listingFormActive. Everytime the state change, perform pushState to store its state as a url query.

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

Add some utility method for getting url query

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;
    }
}

the initial state of listingFormActive should be based on what you saved in the url

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - State history with browser back button vue.js - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)