Skip to content

Manually location.hash = '#some-hash' call causing page reload and components' onMounted lifecycle hook being called again #3052

Open
@Paper-Folding

Description

@Paper-Folding

Describe the bug

I'm developing a lib that captures hash change event to detect if user clicked back button of browser, if user does, the lib will close all of its modals/dialogs it was created. This is a trick to detect user back button click I found here: https://stackoverflow.com/a/25806609/14963554.
The problem is, this requires a location.hash = #lib call inside lib each time the lib opens a modal/dialog, which I think has conflict with vitepress: each time the location.hash = is called, vitepress reload my custom component and causing onMounted lifecycle hook being fired.

Reproduction

This is the very simple re-production link (please click "Get Started" button to go to reproduction route) :
https://stackblitz.com/edit/vite-m2nugj?file=docs%2Fcomponents%2FCustomComponent.vue

  1. First time enter "Get Started" page, an alert message will be called (inside onMounted hook), this is normal;
  2. Click the red button, which will cause a location.hash = #lib call, and the alert message show again! This is abnormal! ;
  3. Dismiss the alert, click "back button" on browser, (mine is the second button on picture below), and the alert message show yet again! Which means onMounted hook called again! This is abnormal!
image

Expected behavior

Hash change that does not causing vitepress navigation change should not causing route reload and component restart its lifecycle.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900HX
    Memory: 21.14 GB / 31.70 GB
  Binaries:
    Node: 18.17.1 - G:\Nodejs\node.EXE
    Yarn: 1.22.19 - G:\Nodejs\yarn.CMD
    npm: 9.6.7 - G:\Nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.2283.0), Chromium (117.0.2045.60)
    Internet Explorer: 11.0.22621.1

Additional context

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions