The Vue.js 2 router seems to malfunction when triggered programmatically, yet it functions properly when used as a

index js file

I tried using Vue Router programatically, but it was not working for me. After searching online, I found that everyone used this.$router.push().

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import BecomeHost from '@/components/BecomeHost'

Vue.use(Router)

export default new Router({
 routes: [
 {
  path: '/',
  name: 'HelloWorld',
  component: HelloWorld
 },
 {
  path: '/become_host',
  name: 'BecomeHost',
  component: BecomeHost
 }
]})

component.vue

When the response was successful, I tried calling the following code but it did not work:

if (res.data.status === 'success') {
    localStorage.setItem('user', JSON.stringify(res.data.data))
    let user = JSON.parse(localStorage.getItem('user'))
    this.setUserData(user)
    this.$router.push('/become_host')
}

Answer №1

If you want to navigate to a different route in your Vue.js application, you can do so using the code snippets below:

this.$router.push({path: 'become_host'})
// or
this.$router.push('BecomeHost')

Answer №2

If you want to navigate using push along with props, you can find more information here

For your specific situation, it seems like you may require something similar to the following examples:

this.$router.push({ path: 'become_host' })

OR

this.$router.push({ name: 'BecomeHost' })

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

Add elements to an array with express, Node.js, and MongoDB

I'm currently learning about the MERN stack and I'm working on creating users with empty queues to store telephone numbers in E.164 format. My goal is to add and remove these numbers from the queue (type: Array) based on API requests. However, I ...

Counting Clicks with the Button Counter

I'm having an issue with my jQuery code that is supposed to count button clicks - it stops after just one click. I need help fixing this problem. $(function() { $('.btn').click(function() { $(this).val(this.textContent + 1); }); } ...

Shopping cart has encountered an issue with storing the data correctly

While I've managed to successfully integrate another service, the challenge now lies in implementing the logic for correctly generating cart items. My goal is to increment the quantity of items in the cart by one with each function call, but it seems ...

In React, the entire component refreshes every time the modal is opened

<ThemeProvider theme={theme}> <GlobalStyle /> {componentName !== 'questionaire' && componentName !== 'activityResult' && <CardWrapper />} <ErrorModal ...

Passing data as a parameter from the view to the controller using AngularJS

I am attempting to retrieve data from a view, which must be passed as a parameter in a function in order to populate an array in the controller. However, I am not receiving any objects in return. Here is what I have tried: VIEW <div ng-repeat="cssfram ...

Store the current user's authentication information from Firebase in the Redux state using React-Redux

I am facing an issue with persisting the state of my redux store using the currentUser information from Firebase Auth. The problem arises when I try to access auth.currentUser and receive null, which I suspect is due to the asynchronous loading of the curr ...

Is there a way to adjust user privileges within a MenuItem?

One of my tasks is to set a default value based on the previous selection in the Userlevel dropdown. The value will be determined by the Username selected, and I need to dynamically update the default value label accordingly. For example, if "dev_sams" is ...

Define JSON as writeable: 'Error not caught'

I'm facing an issue with a read/write error in my JavaScript code because the JSON file seems to be set as read-only ('Uncaught TypeError: Cannot assign to read only property'). How can I change it to writable? Should I make changes in the J ...

Utilizing JavaScript within my WordPress site

I'm experiencing some issues with my JavaScript code in WordPress. I have been trying to use the following code on my page, but it doesn't seem to work properly. Can someone please guide me on how to integrate this code within my WordPress page? ...

Restrict the size of the numerical input in AngularJS

<input class="span10" type="number" max="99999" ng-maxLength="5" placeholder="Enter Points" ng-change="myFunc($index)" ng-model="myVar"> This code snippet adjusts the value of form.input.$valid to false if the number entered exceeds 99999 or is long ...

Modifying a single element within a class with Jquery

Is it possible to create a stack of pages on a website using JQuery? I found this image that shows what I'm trying to achieve: image. Instead of applying ID css for each page, I'd like to use JQuery. While researching similar questions, I came ac ...

Find all relevant employee information at once without the need for iteration

I have structured two JSON arrays for employee personal and company details. By inputting a value in the field, I compare both tables and present the corresponding employees' personal and company information in a unified table. <html> ...

Generate random floating numbers at intervals and calculate their sum

I've been given a task to complete. Upon page load, there should be 10 fields labeled as A, B, C, D ... each with the initial value of 3. After the page has loaded, every 2 seconds all field values should change randomly. The change will be a rand ...

Creating a specialized filter for AngularJS or customizing an existing one

AngularJS filters are great, but I want to enhance them by adding a function that can check if a value is in an array. For example, let's say we have the following data: Queue = [ {'Name':'John','Tier':'Gold&ap ...

Tips for parsing a JSON file within my node.js application?

I am working on a node.js service that involves validating JSON data against a schema defined in jsonSchema. Below is the code snippet for my service: app.post('/*', function (req, res) { var isvalid = require('isvalid'); ...

Undefined values in Javascript arrays

Currently, I am sending a JSON object back to a JavaScript array. The data in the array is correct (I verified this using Firebug's console.debug() feature), but when I try to access the data within the array, it shows as undefined. Below is the func ...

Utilize npm to incorporate external JavaScript libraries into Meteor 1.3

Trying to integrate the OpenSeadragon library into my Meteor app has been a bit challenging. After successfully installing it via npm using meteor npm install openseadragon, I found that the OpenSeadragon docs only offer an example using the script tag. T ...

Show the cell data when the checkbox next to it is selected

I have a specific table setup and I am trying to display the content of the table cell if its corresponding checkbox is checked upon clicking a button. For example: If Row2 is checked, an alert box should display Row2 Below is my code snippet, Java ...

Using a semicolon at the end of the line is considered a favorable practice when writing ES6 code in Babel

After browsing through various tutorials on the internet that utilize redux and react, I came across a common trend of omitting semicolons in ES6 code when using Babel. For instance, some examples neglect to include semicolons at the end of import or expo ...

Tips for including an object as a prop using Vue Router

When working with Vue JS3, I have encountered an issue regarding passing props in my Vue component. Here is how I am currently doing it: <script> export default { data() { return { links: [], }; }, methods: { editLink(el) { this.$ ...