1986670 - Nuxt 2 triggers unexpected navigation when router's push method is called inside a link click event handler

Status: NEW

(Core :: DOM: Navigation, defect)

Description

[Tooru Fujisawa [:arai]]

Separated from bug 1839053.
(This issue had been happening on actual website, but no longer happens.)

Below, copied from bug 1839053 comment #15.

---

Setup the server

Run the following:

$ mkdir nuxt-test
$ cd nuxt-test
$ yarn create nuxt-app test-2
  # Just hit enter key for all questions
    * Project name: test-2
    * Programming language: JavaScript
    * Package manager: Yarn
    * UI framework: None
    * Template engine: HTML
    * Nuxt.js modules: (select none)
    * Linting tools: (select none)
    * Testing framework: None
    * Rendering mode: Universal
    * Deployment target: Server
    * Development tools: jsconfig.json
    * What is your GitHub username: -
    * Version control system: Git
$ cd test-2

Edit pages/index.vue:

<template>
  <a id="foo" href="/foo" @click="onFooClicked">FOO</a>
</template>

<script>
export default {
  name: 'IndexPage',
  methods: {
    onFooClicked(e) {
      this.$router.push("/bar");
    }
  }
}
</script>

Create pages/foo.vue:

<template>
  <div>foo</div>
</template>

Create pages/bar.vue:

<template>
  <div>bar</div>
</template>

Run the following and wait for the server to start:

$ yarn dev

Steps on browser

1. Open Firefox Nightly
2. Access http://localhost:3000/
3. Click "FOO"

Result on Firefox

Remains on http://localhost:3000/

Clicking multiple times sometimes navigates to http://localhost:3000/foo

Result on Chrome

Navigates to http://localhost:3000/foo

---

Bug 1839053 comment #5, bug 1839053 comment #7, bug 1839053 comment #9 have some analysis around the code,
and some other comments have analysis around the behavior, but still we haven't figured out how and why this is happening.

This issue is specific to Nuxt 2, and using the same code in Nuxt 3 doesn't cause the issue.
Nuxt 2 is EOL, so there's less chance we bump into a new issue with this behavior, but we might still see some issues with existing websites.

https://v2.nuxt.com/ja/lts/

Comment 1

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Sounds like that if we could do something, we needed to change the handling of navigation which is interrupted by a reload?

I'm not sure who is familiar with this, but I guess this is a navigation issue. So, asking smaug...