Redirecting with VueJS Router to a specific path on the server

I have set up my router with the following configurations:

export default new Router({
  mode: 'hash',
  linkActiveClass: 'open active',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: '/',
      ....

In one of my .vue files, I have a logout function defined like this:

logout () {
  this.$router.push('/logout')
}

When the app is running, the current path is:

www.mydomain.com/app#/router_paths

So when I invoke the logout function described above, I get redirected to:

www.mydomain.com/app#/logout

I attempted to use the following code snippet for the logout option:

<b-dropdown-item ><i class="fa fa-lock"></i> <a href="logout">Logout</a> </b-dropdown-item>

Although this hardcoded approach works locally and on the server, hovering over the link displays:

www.mydomain.com/logout

But clicking it does not lead to any redirection.

Is there a way to instruct the router to redirect to

www.mydomain.com/logout

(without hard coding it directly in the code - as I need it to work both locally and on deployed instances)?

Answer №1

window.location.replace('/sign-out')

The replace() function is used to load a new document in place of the current one.

quoted from w3.

signOut () {
  window.location.replace('/sign-out');
}

then press

<button v-on:click="signOut">Sign Out</button>

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

Identifying the Operating System of Your Device: iOS, Android or Desktop

I am in need of displaying different app download links based on the user's operating system. This includes IOS, Android, or both if the user is accessing the page on a Desktop device. I am currently utilizing React and Next.js for this project. Unfor ...

Changing the position of an element in CSS using the center as the reference point, based on a JavaScript variable: How can it be done?

I have an image marking a scale, with the marker's position in HTML set as: <image class="red-marker" xlink:href="./assets/images/marker.png" [attr.x]=percentage width="12" height="40" y="0" ></image> But I want the middle of the marker ...

Ways to display a sorting icon depending on a calculated attribute

My goal is to display the appropriate sorting icon based on a computed value. For instance, if the column1 is clicked, one of two classes, classRefcodeDown or classRefcodeUp, should be true. Both computed properties invoke a method called sortClassRefcode, ...

methods for transforming JSON array output objects into individual non-array values

I'm facing an issue with a JSON result that contains latitude and longitude as an array like [13.0801721, 80.2838331]. I need help in converting this to comma-separated values without the array brackets, similar to 13.0801721, 80.2838331. This is my ...

JavaScript: Exporting and Utilizing a Function within a Model.js File

Coming from a background in PHP OOP development, I am aware that there are various methods to create classes in JavaScript. I require assistance from a JavaScript developer to resolve this particular issue. Here is the situation: I am building an AWS lamb ...

Understanding the scope of a variable within a function in JavaScript

Working with JSON, I am attempting to determine the total number of elements in the response. $.getJSON("/api/getEvents", function(data) { $.each(data, function(key, event) { var count = 10; $.getJSON("/api/getUsers", f ...

Guidelines on maintaining an active getSelection with JavaScript

I need help figuring out how to change the font size of selected text within a div without losing the highlight/selection when I click a button. Can someone assist me in keeping the text highlighted while also resizing it upon clicking the button? ...

Is there a way to deactivate the parent background div when a child container div is in use?

Is there a way to deactivate the main background container that holds a grid with data? Within this grid, users have options for sorting and exporting the data into formats like csv/pdf. Additionally, there is a filter button on the grid that, when clicked ...

Tips for avoiding HTML <tags> in the document.write function

I am trying to paint the actual HTML code within a tag using JavaScript but escaping it doesn't seem to be working. function displayHTMLString(n){ document.write("'<table>'"); for (i in range(0,n)){ ...

transform the outcome of a $lookup operation into an object rather than an array

When performing a $lookup from a _id, the result is always 1 document. This means that I would like the result to be an object instead of an array with one item. let query = mongoose.model('Discipline').aggregate([ { $match: { ...

AngularJS blank drop-down selection

I am currently working on an AngularJS select element with ng-options using the code below: <select ng-model="vm.selectedship" ng-change="vm.updateShip()" data-ng-options="ship as ('ship' + ' is ready (' + ship.currentlocation + & ...

What is the rationale behind not storing OAuth2 access tokens as HttpOnly secure cookies? How could this approach be implemented in a Node.js application?

I have a Node.js RESTful api setup where the response token received after posting to /oauth/token typically looks like this: { "refresh_token": "eyJraWQiOiI2...", "token_type": "Bearer", "access_token": "eyJraWQiOiI2Nl...", "expires_in": 3600 } ...

methods for transferring javascript array to JAVA array with AJAX

I'm currently facing an issue with posting an array of JavaScript elements into a Java array of Strings. Here's the situation... The JavaScript code I have is as follows: var quantity_arr = new Array(); for (var i=0; i< <%= cart.size() % ...

What is the best way to disable the click function for <a> tags that have a specific class?

I am dealing with parent navigation items that have children, and I want to prevent the parent items from being clickable. Here is an example of how they currently look: <a href="parent">Parent Item</a> Is there a way to select the <a> ...

Various perspectives within a state

I am facing an issue with my articledetail state when navigating to it: $state.go('articledetail', { 'article': article.itemNumber }); Within the articleDetail.html file, I want to display all subviews simultaneously: <div cla ...

This function appears to have an excessive number of statements, totaling 41 in total

Currently, I am using this controller: .controller('ctrl', function($scope, $rootScope, $timeout, $alert, $location, $tooltip, $popover, BetSlipFactory, AccordionsFactory, AuthFac ...

Limit Table Search to Specific Dynamic Key Values in JavaScript ArrayObjects

Currently, I am in the process of developing a customized search feature that involves working with an array of objects. const data = [{ name: "Janet McKenly", age: 49, city: "Baltimore", active: "2019-02-15", ...

The React Modal component seems to be malfunctioning within the context of Nextjs

Out of the blue, this issue popped up and I'm puzzled about why it's happening. I have two modals (with different names) that are identical in structure but only one is functioning properly. Both modals use the React-Modal library. The first moda ...

Simple CSS for creating a "red alert badge" with a number count

Looking for the best way to display the popular red notification indicator with count in a consistent manner across various browsers. It seems tricky to achieve a design that looks seamless on all platforms, as different browsers interpret paddings differe ...

Clicking on ng-click doesn't result in opening new windows

I am experiencing an issue with a table where the buttons in the last column are supposed to open a new window but they are not working as expected. Below is the code snippet I am using: <table class="table table-hover" id="angular_table"> <th ...