Looking to Navigate to a URL After Making an AXIOS GET Request in Vue.js

Upon receiving the AXIOS API response, I want to redirect to the URL in a new tab.

Currently, I am accomplishing this by using window.open("url") within the API call as shown below.

viewimage(image) {
          Nova.request().get(`/showimage/`+image,)
              .then(response => {
                this.urlimage = response.request.responseURL;
                window.open(this.urlimage,'_blank');
               
              });
    },

However, I am questioning whether it is the correct approach to use window.open("url") in Axios in a production environment due to encountering pop-up blockers in all browsers.

If there is an alternative method to achieve this task, please provide guidance from your end.

Thank you,

Answer №1

To navigate using vue-router, it's recommended to use router.push("yourroutename").

For non single-page apps, you can simply use window.location.href = 'some url'.

Check out the original answer for more info: Vue.js redirection to another page

Answer №2

easy fix

In the project I'm developing, I have implemented this functionality this.$router.push("/this.imageurl");

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

Restrict date range in Bootstrap Datepicker based on database values

Is there a way to remove specific date ranges from the database? For instance, if I have date ranges from 15.01.2021 to 21.01.2021 and from 24.01.2021 to 03.02.2021, is it possible to prevent these dates from being selected in the datepicker? I would lik ...

Increase by one using async/await in Node.js JavaScript

Is it possible to output the result from the 'three' function to console.log in the 'one' function? one = async (number) => { console.log(`we received ${number}`) await two(number) console.log('the num ...

I'm looking to retrieve the selected value from my autocomplete box in React using the Material UI library. How can I

Here is a snippet of code that utilizes an external library called material ui to create a search box with autocomplete functionality. When a value is selected, an input tag is generated with the value "selected value". How can I retrieve this value in ord ...

Display the item for which the date is more recent than today's date

Is there a way to display only upcoming 'events' on my page based on their event_date? <% for (let event of events){%> <div class="card mb-3"> <div class="row"> <div class="col ...

"Securing Your Web Application with Customized HTTP Headers

I'm currently working on setting up a POST request to a REST API (Cloudsight) with basic authorization. Here is the code I have so far: var xhr = new XMLHttpRequest(); xhr.open("POST", "http://api.cloudsightapi.com/image_requests", true); xhr.setRequ ...

Error in Mongoose validation: "Please provide a value for the 'first' field and the 'last' field."

Another user has previously posted a similar question, but I'm still struggling with my MongoDB website. I am working on a project to store names using mongoose. Here is the code for my routes and models: const router = require("express").Router(); c ...

Encountering issues with the Sequelize Model.prototype.(customFunction) feature malfunctioning

While attempting to define a customFunction within the Sequelize model, I encountered an error: TypeError: user.getJWT is not a function at User.create.then (/projects/test/a/app/controllers/UserController.js:22:29) Below is the code snippet from ...

Steps for redirecting to an external URL with response data following an HTTP POST request:

this.http.post<any>('https://api.mysite.com/sources', [..body], [...header]) .subscribe(async res => { const someData = res.data; const url = res.url; window.location.href = url }) After redirecting to the specified UR ...

Connect Tasks and Lists in Meteor Todo app

I'm currently developing a task management application using the Meteor tutorial as a reference. I have created lists based on the task model, but I am struggling to figure out how to connect them and display all tasks associated with a specific list ...

Change the font awesome class when the button is clicked

Here is the code I have in this jsfiddle. I am trying to change the font awesome icon on button click using javascript, but it doesn't seem to be working. I am new to javascript, so please pardon me if this is a silly question. HTML <button id="f ...

express-validator: bypass additional validation in a user-defined validator

Utilizing the express-validator package for validating my request data. As per the documentation, we need to declare them in this manner: app.use(expressValidator({ customValidators: { isArray: function(value) { return Array.isArray(value); ...

Using Vue.js to Delete an Element from an Array

I am facing an issue with my form value where the IDs are not getting deleted when I remove data. Each time I save data, a new ID is added to the list in the form value. But when I delete any of those data entries, the corresponding ID is not removed from ...

Exploring AngularJS: Utilizing ngOption for displaying data fetched from a cached API request

In my application, I am making multiple API calls and caching the data for future use. When someone else interacts with the app, I want to retrieve that cached data and display it in a drop-down using ng-option. To access the cached data for each call, I ...

Trying out a TypeScript class created with Jasmine testing

Looking to test a TypeScript class using Jasmine, I encountered an error when running jasmine spec/movieSpec.js. The error message "TypeError: Movie is not a constructor" appears. My files are as follows: src/movie.ts export class Movie { private name: ...

find all occurrences except for the last of a pattern in javascript

When considering the patterns below: "profile[foreclosure_defenses_attributes][0][some_text]" "something[something_else_attributes][0][hello_attributes][0][other_stuff]" It is possible to extract the last part by utilizing non-capturing groups: var rege ...

React UseState is having trouble updating its state variables

Having trouble with my program that fetches data from Firebase and is expected to rerender the UI after receiving updates from the database. I can log the values but unable to update the value inside useState. The UI renders initially but does not rerender ...

Prevent users from submitting multiple times using Angular

There is an issue where users click the save button multiple times, causing a queue of requests to be submitted and resulting in the creation of duplicate data. How can we prevent this on the front-end so that only one request is submitted even if the butt ...

What is the process for creating a downloadable link or button?

Here's the scenario I'm dealing with: I have a dynamic website that includes a form with a "select" dropdown menu, followed by a link or button. When a user clicks on the link: If the selected option is "display," the data is shown using AJAX ...

An automatic selection in my AngularJS drop-down menu

I am currently utilizing AngularJS to develop a basic web application. My goal is to have the values of city A displayed as the default choice in my select dropdown. index.html <body ng-controller="MainCtrl"> <select ng-model="selectedCity" ...

Unlocking the power of python with web2py by tapping into html form values

I'm working on a project using web2py and need to incorporate ajax/javascript with a form. Currently, when a user selects an option in the departure box, the arrival box appears. However, I'm unsure of how to filter the list of arrival options ba ...