1

I'm working on nuxt.js project and want to ask a question. When I display modal using bootstrap's modal, does it stack the URL to the browser viewing history? enter image description here

Here is the detail of the problem I currently have. I have two pages, which are page A and B.

  • Page A has a button to link to page B, and I used $router.replace of programmatic navigation. So the history is not supposed to add.
  • Page B has a button to show modal, and the modal has a modal close button, which literally closes the modal and back to page B.

The problem is, once I opened and closed the modal, I have to press the browser"s back button twice to back to page A. like, show modal on page B -> close modal on page B -> press browsers back button (but the URL doesn't changes and still stays on page B) -> press browsers back button again, and back to page A.

So I thought by showing a modal using bootstrap adds new history entry.

add this part later

here is a code for modal

// display modal 
<button data-toggle="modal" data-target="#removeModal">show modal</button>

// dismiss modal
<div class="mdal fade" id="removeModal">
    <p data-dismiss="modal">
        <img src="@/assets/img/x-icon.png" alt="X-icon">
    </p>
</div>
kissu
  • 40,416
  • 14
  • 65
  • 133
zzzzou
  • 177
  • 2
  • 15
  • Post the code you are using. – bassxzero Apr 16 '21 at 02:52
  • 1
    Hi there. So sorry for the late reply. I was not able to solve the problem I have, but thanks to your suggestion, I can now see the history of the routing. So it was really helpful. I think there is a bug for displaying modal, and that is why this routing issue happens. – zzzzou Apr 19 '21 at 01:27

1 Answers1

1

You could confirm this by using: window.history.length and track the number:

  • before the modal
  • during the modal
  • after the modal

That way, you will be sure if it's actually Bootstrap. Meanwhile, I doubt this is it (because it is using vue-portal and not some shady history API tricks).

I do think that it's coming from somewhere else. Firstly, why do you use replace if you actually plan to allow to go back to this page ? Also, why not using nuxt-link for the purpose of moving to another page ?

As an alternative, to help you debug, you can use the Routing - History tab of your devtools, it will show you exactly what is inserted into vue-router (in case you have a middleware or idk that is pushing 2 entries ?). enter image description here

EDIT, I tested it myself with a brand new Nuxt project and it's totally working as expected with both of those solutions and a modal on the target page (index)

<nuxt-link :to="{ name: 'index' }" replace>replace index</nuxt-link>
<button @click="$router.replace({ name: 'index' })">replace to index</button>

So, I guess that something is wrong with your code at this point.

kissu
  • 40,416
  • 14
  • 65
  • 133