title: Vue-router - How to cancel operations when user clicked menu links
body: <p>Not specific to Vue.js but to Javascript Single Page applications. If you have a form and a rather long running submit action, like saving something. The submit operation should save something and then pushing to a new route for a success message.  </p>
  
  <p>While waiting for the result, the user clicks on a different link and is going away.</p>
  
  <p>See this fiddle:</p>
  
  <p><a href="https://jsfiddle.net/hajbgt28/4/" rel="nofollow noreferrer">https://jsfiddle.net/hajbgt28/4/</a></p>
  
  <pre><code>const Home = { 
    template: '&lt;div&gt;&lt;button @click="submit"&gt;Save and go Bar!&lt;/button&gt;&lt;/div&gt;',
    methods: {
       async submit() {
              await setTimeout(() =&gt; {
             this.$router.push("/bar");
          }, 5000);
       }
    }
  };
  const Foo = { template: '&lt;div&gt;Foo&lt;/div&gt;' }
  const Bar = { template: '&lt;div&gt;Bar&lt;/div&gt;' }
  
  const router = new VueRouter({
    mode: 'history',
    routes: [
      { path: '/', component: Home },
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
  })
  
  new Vue({
      router,
    el: '#app',
    data: {
      msg: 'Hello World'
    }
  })
  </code></pre>
  
  <ol>
  <li>Click Home</li>
  <li>Click the button </li>
  <li>Click on "Foo" immediately, you see "Foo"</li>
  <li>Wait a few seconds</li>
  <li>The Page changes to "Bar"</li>
  </ol>
  
  <p>I have a two solutions in my mind:</p>
  
  <ul>
  <li>I can check inside the submit operation if I am still on the route I expect and only proceed if the user is still on this page. It is rather complicated to check it every time</li>
  <li>Disable all links on the page while loading. But this makes the page useless until the operation is finished.</li>
  </ul>
  
  <p>What is the best practice for situations like this?</p>