Avoid loading the page when the browser's back button is pressed with vue-router

In my application, I have a "Home" page as well as a "Success" page.

On the Success page, there is a button that, when clicked, redirects to a URL like https://google.com, using 

window.location.href='https://google.com'
.

Currently, I am able to navigate from the Home page to the Success page using vue-router and then click the button to go to the specified URL. However, upon pressing the browser's back button, I would prefer it to take me back to the Home page instead of the Success page.

Is there a way to achieve this desired behavior?

javascriptvue.jsvue-router

Answer №1

If your Javascript is contained within a Vue instance, you have the option to include a call to this.$router.replace just before assigning window.location.href.

An implementation could resemble the following example:

methods: {
  onLinkClick() {
    this.$router.replace({ name: 'dashboard' }); // or any other page name
    window.location.href='https://example.com';
  }
}

For more information on programmatic navigation in vue-router, refer to the documentation provided.

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

Error encountered when importing a Material-UI component: Unable to load a module from @babel/runtime

Struggling to compile the index.js file with rollup: import React from "react"; import ReactDOM from "react-dom"; import Grid from "@material-ui/core/Grid"; ReactDOM.render( <React.StrictMode> <Grid conta ...

javascriptreactjsmaterial-uirollupjs

Encountering a "DOM Exception 11: InvalidStateError" when attempting to use websocket.send

I encountered the following error message: DOM Invalidate exception 11 This error is coming from the code snippet below, but I'm having trouble identifying the root cause. /*The coding style may appear pseudo-stylish with potential syntax errors*/ ...

javajavascriptwebsocketjetty

Can a SVG Animation be created featuring a progress ring with both the right and left dash offsets moving simultaneously?

Currently in my codepen, I am working on a project where I am using GSAP. If you are unfamiliar with that, no worries - just focus on the dashoffset and dasharray in the SVG circulation path. You can find this project in Codepen which is part of our premi ...

javascriptanimationsvggsap

AngularJS testing typically involves the use of the inject module injection process

Currently, I am working on testing a service called documentViewer, which relies on another service named authService. angular .module('someModule') .service('documentViewer', DocumentViewer); /* @ngInject */ function Do ...

javascriptangularjsunit-testingjasmine

What is the best way to add custom text to the URL input field of the CKEditor image/link dialog?

Hey everyone, I've been working with CKEditor 4 on my project and I'm facing a challenge. I need to insert a string into the URL textfield in the image or link dialog window using JavaScript/jQuery. Here's where I'm stuck: I can't ...

javascriptjqueryckeditor

What is the reason for the omission of H1 tags from the table of contents list in NuxtJS's Content module?

Currently, I am facing an issue with importing a large amount of markdown content that heavily utilizes H1 (#) tags. While trying to create a table of contents (TOC) component, I noticed that the @Nuxt/Content package does not include H1 tags in the provid ...

vue.jsnuxt.jsmarkdownnuxt-content

What is the reason that TypeScript does not automatically infer void & {} as the never type?

When TypeScript's void type is used in combination with other types through intersection, the outcomes vary. type A = void & {} // A becomes void & {} type B = void & '1' // B becomes never type C = void & 1 // C becomes never type D = void ...

javascripttypescripttypescript-typings

Achieving a draggable object to land on a designated target

Before you jump to conclusions based on the title, let me clarify that I am not referring to jQuery UI draggable. Instead, I am discussing a plugin that I am currently developing for the community. The goal of my plugin is to create a designated target fea ...

javascriptjquerypluginsdrag-and-drop

What is the formula for determining the percentage of transparent area on a canvas?

In my Ionic 4 drawing app, I have incorporated an image of the number 1 on the canvas using drawImage and made the background transparent. If users (typically kids) draw outside the number 1 image, the accuracy percentage will decrease. While searching for ...

javascriptangularjsimageionic-frameworkhtml5-canvas

Is there a way to apply the same class exclusively to the first child within a group?

How can I include specific classes for only the initial group of items in a nested ul li list? <ul> <li class="first-group"> <ul> <li></li> </ul> </li> <li class="first-group"></li> & ...

javascriptjqueryhtmlcss

Can we split the PHP Photo Gallery into a second page after displaying 12 images?

I recently developed a simple PHP photo gallery for my website that pulls data from a MySQL database. By using a while loop, I am able to display three images (from ID 1 to 3) in a single row, continuing this pattern until a total of 12 images are shown. ...

phpjavascript

Progressive rendering of a substantial mesh using three.js

How can I efficiently render a large static mesh in three.js, even if it's 2 GB with tens of millions of polygons? My plan is to stream the mesh geometry buffers into indexedDB and render them progressively to the screen, all while maintaining an int ...

javascriptperformancegraphicsthree.jswebgl

Having trouble invoking an established route within a different route in an Express JS project

While working with an Express JS application connected to a mySQL database, I encountered an issue when trying to fetch data from a pre-defined route/query: // customers.model.js CUSTOMERS.getAll = (result) => { let query = "SELECT * FROM custo ...

javascriptnode.jsexpress

"Troubleshooting issue: Module fails to reload following JSON.parse error

For QA testing purposes, we have a test page that allows our QA team to replicate server behavior by passing JSON to a mock service. Everything functions correctly when valid JSON is used, but if invalid JSON is provided, an error is returned - which is ex ...

javascriptangularjsjsonangularecmascript-6

Error message in Typescript: When a class has initialized properties, a 'super' call must be the first statement in the constructor

I am currently facing some typescript errors in my project. Would you like to see a sample of the code that is causing the issue? Here is a snippet: module CoreWeb { export class Controller implements IController { public $q; ... This piece of cod ...

javascriptangularjsbackbone.jstypescript

Creating synchronization mechanisms for events in JavaScript/TypeScript through the use of async/await and Promises

I have a complex, lengthy asynchronous process written in TypeScript/JavaScript that spans multiple libraries and functions. Once the data processing is complete, it triggers a function processComplete() to indicate its finish: processComplete(); // Signa ...

javascripttypescriptpromiseasync-await

Having trouble verifying a phone number using the awesome-phonenumber npm package?

I recently developed some JavaScript using the awesome-phonenumber npm package. index.js const yargs = require('yargs'); var PhoneNumber = require( 'awesome-phonenumber' ); const argv = yargs .usage('Usage: $0 -n [num]' ...

javascriptnode.jsnpm

What causes the appearance of an HTTP header error and how can we identify the bug?

I tried to convert XML to JSON using two files which are included here. However, I keep encountering an error. Despite searching on SO for solutions, I haven't been able to find the answers. main.js /** SET ENGINE TO PUG */ app.set("views", ...

javascriptnode.jsexpresspug

The Limits of JavaScript Tables

Currently facing an issue with a webpage under development. To provide some context, here is the basic layout of the problematic section: The page features a form where users can select from four checkboxes and a dropdown menu. Once at least one checkbox ...

javascriptjqueryhtmlcss

An error has occurred in the Node.js module export due to an unexpected token

While working on my controller, I initially wrote it like this: module.exports.create_payment = function(){ console.log('create_payment') } However, I encountered an issue with this approach. If I have 10 methods in one controller, I would ...

javascriptnode.jsexpress