Listening to onpopstate event on vuejs

vue.js popstate
Sunkhern picture Sunkhern · Nov 28, 2017 · Viewed 8k times · Source

I'm quite new to Vue and I'm trying to figure out how to listen to the onpopstate event on vuejs to start a specific function when it occurs. I went through the router documentation but I can't find an equivalent for the onpopstate event handler on vue.

Thanks for the help, Will

Answer

craig_h picture craig_h · Nov 28, 2017

If you're using vue-router in an SPA then I would just place it in the created hook of the base component:

  created() {
    // Attach onpopstate event handler
    window.onpopstate = function(event) {
      alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
    };
  },

Because the base component serves up all views, you should find that the event will fire throughout your entire app.

Here's the JSFiddle to show you how this setup would work: https://jsfiddle.net/bjb8ukb8/

Related questions

How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More
forEach is not a function error with JavaScript array

I'm trying to make a simple loop: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) But I get the following error: VM384:53 Uncaught TypeError: parent.children.forEach is not a function …

Read More
Can you force Vue.js to reload/re-render?

Just a quick question. Can you force Vue.js to reload/recalculate everything? If so, how?

Read More