Is there a way to view browsing history in Vue / Nuxt.js?

Currently, I am working on a nuxt.js project and have a question regarding the use of modals with Bootstrap. Does displaying a modal using Bootstrap's modal add an entry to the browser's viewing history? https://i.sstatic.net/h4qjN.jpg

Here is the issue I am facing: I have two pages - page A and B.

  • Page A contains a button that links to page B. I used $router.replace for programmatic navigation, so it should not be added to the history.
  • Page B has a button to show a modal, which includes a close button that takes you back to page B once clicked.

The problem arises when I open and close the modal. To go back to page A, I have to press the browser's back button twice. For example: Show modal on page B -> Close modal on page B -> Press the browser's back button (the URL remains on page B) -> Press the back button again to return to page A.

My assumption is that showing a modal using Bootstrap adds a new history entry.

Add this section later

Below is the code for the 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>
javascriptvue.jsnuxt.jsbootstrap-modal

Answer №1

To verify this, you can check using: window.history.length and monitor the count:

  • prior to showing the modal
  • while the modal is displayed
  • after closing the modal

This will help confirm if Bootstrap is indeed causing the issue. However, I have some doubts about it being the culprit (especially since it utilizes vue-portal instead of manipulating the history API).

I suspect there may be another source triggering this behavior. Firstly, why use replace if you intend for users to navigate back to that page? Additionally, have you considered utilizing nuxt-link for transitioning to a different page?

For troubleshooting purposes, you can utilize the Routing - History section in your browser's developer tools. This will display the exact entries being added to vue-router (in case a middleware or other factor is creating duplicate entries).

UPDATE, I conducted a test in a fresh Nuxt project and both methods functioned correctly with 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>

Based on this, it seems like there may be an issue within your code at this specific juncture.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on serving Vue's static dist folder using express with app.use('someRoute')

I have encountered an issue while serving a dist folder from a vue app (created with create-vue-app). Everything works fine when I use the root route without specifying any sub-routes. However, when I point to a specific sub-route like '/static', ...

node.jsexpressvue.jsroutesstatic

Node.js: Issue with accessing external resources caused by incorrectly encoded GET parameter in URL?

When handling incoming client GET requests, I generate HTML pages based on the res.sendfile instruction. Everything has been working smoothly so far. However, I recently introduced a new extended GET route that includes a URL encoded parameter (verificati ...

javascriptnode.jsexpress

What is the best way to utilize purgeCss in conjunction with other module exports?

After reading the documentation, I want to integrate purgeCss into my NextJS project. The recommended configuration in the docs suggests updating the next.config.js file like this: module.exports = withCss(withPurgeCss()) However, I am unsure where exact ...

javascriptnext.jspostcsscss-purge

Struggling to access Google using Selenium automation due to the message "This browser or application may not be secure."

Whenever I attempt to log in to Google using selenium, I keep encountering the error message stating that "This browser or app may not be secure." The code snippet I am using for the login function is: async function loginToChrome(driver, username, passwo ...

javascriptseleniumgoogle-chromeselenium-webdriverselenium-chromedriver

The jQuery .each function is malfunctioning specifically on Google Chrome browsers

I developed a web application that utilizes jQuery to automatically submit all forms on the page. The code snippet is as follows: $('form').each(function() { $(this).submit(); }); While this functionality works perfectly in Internet Explore ...

javascriptjqueryhtmlgoogle-chromesubmit

Adding a new item to a collection by pushing it onto an array using the

Currently, I am attempting to modify a collection by adding elements to an existing array within the collection. Below is the function I am trying to execute for updating: Games.update({ _id: game._id }, { $push: { players: { name: playerName } }, }); ...

javascriptmongodbmeteormeteor-collection2

I have chosen not to use the hashHistory plugin for one specific reason: the URLs are suffixed with hashes

index.js(previous) import React from 'react' import { render } from 'react-dom' import { Router, Route } from 'react-router' import App from './modules/App' render(( <Router history={hashHistory}> <R ...

javascriptreactjswebpack

Using Jquery Chosen Plugin to Dynamically Populate One Chosen Selection Based on Another

Good evening to all, please excuse any errors in my English. I have successfully integrated a jQuery Chosen plugin with my 'estado' field (or province). My goal is to populate another jQuery Chosen plugin with the cities corresponding to that s ...

javascriptjqueryhtmlajaxjquery-chosen

Invoke the C# function in the code-behind using an AJAX call

I have been attempting to encrypt two variables and return them as query strings using a code-behind function, but I have not been successful. This is my first time trying Ajax. Here is the method in my code-behind: [WebMethod] public static string Encri ...

javascriptc#jqueryasp.netajax

How can I update the color of table rows after the ng-repeat has been implemented?

My current project involves Django, Python, and a bit of AngularJS. I have a dynamic history table that grows as data is added. I am looking to apply some simple CSS to this table - specifically, I want to give every even-numbered row a black background ...

javascriptpythoncssangularjsdjango

Exploring Angular.js methods to capture values from check boxes and radio buttons simultaneously

Check out my demo at https://embed.plnkr.co/R4mdZr/ Just diving into the world of Angular, I'm looking to retrieve both true values from checkboxes and radio button selections. I have a condition where if the minimum value for ingredients is one, it ...

javascriptangularjscheckboxradio-button

Creating a light-box feature for my ReactJS app with react-multi-carousel

I am working on an application where images are fetched from a rest api and displayed in a react-multi-carousel. I want to make these images clickable for a light-box effect. As someone new to React, I have included my code for the carousel slider below: ...

javascriptreactjsreact-multi-carousel

How can I retrieve the line number of a code during runtime in JavaScript?

Is there a way to add a console.log statement that would indicate the line number it is on in JavaScript? For example: console.log ('Line:', [code to get the line]). The output in the console would be Line: [line number], helping me identify wher ...

javascriptnode.js

Tips on logging a click event in Vue.js

Having some trouble with this code snippet. I can't seem to figure out why the message isn't being printed to the console. Can anyone help me spot the mistake? new Vue({ el:'#app', methods:{ nextPage: function(){ consol ...

vue.jsvuejs2

Trouble persisting values with Heroku due to variable issues

Here is a concise example: let value = null; const getValues = () => { fetch('/third-party-api') .then(res => res.json()) .then(data => { value = data; }) } getValues(); app.get("/values", async (req, res) ...

javascriptnode.jsexpressheroku

Leverage API providing HTML and JavaScript exclusively using PHP script

Seeking a way to automate the conversion process from HTML to PNG using a PHP script with a REST API. The website only provides an example using HTML and JavaScript, allowing users to upload an HTML file for conversion. My PHP script currently generates H ...

javascriptphphtmlajax

Building a feedback mechanism with HTML, JavaScript, and MongoDB

I had an idea to develop an employee feedback system that could gather feedback and store it in my MongoDB database. I have included the backend and frontend code below, but unfortunately, I ran into an error: Failed to submit feedback. Please try again ...

javascriptnode.jsmongodb

The tablesorter plugin from Jquery isn't functioning properly on my dynamically loaded ajax table

I am having trouble getting Tablesorter to work with my table. I attempted to use .trigger('update') but it did not have the desired effect for me. Instead, I tried using stupidtable and it worked to some extent, but not perfectly (it did not sor ...

javascriptjqueryajaxhtml-tabletablesorter

Leverage props in Vue.js in combination with Symfony

I am struggling to retrieve a variable passed in the URL from Twig and send it to VueJS for calling an API. However, I am facing issues with using PROPS from VueJS. Below is my Twig template: {% block body %} <Realmstatus v-bind:region="{{ app.req ...

vue.jssymfony4

Altering the context of Javascript script execution

I needed to switch the JavaScript execution context from the parent window to the child window. I was able to successfully load my script objects and functions into the child window context, however, I encountered difficulty in making third party libraries ...

javascriptjquery