Navigating with Vue Router: Automatically redirecting to the homepage upon completion of registration

I have successfully completed the creation of the user registration form.

Once the sign-up process is finished, my goal is to have the page redirect back to the home page.

I have now integrated vue-router using the vue CLI command.

Initially, I tried placing the router method after this.$store.dispatch('signUpUser', signUpData) in the code below. However, I encountered difficulties.

Ultimately, I decided to implement this.$router.push({name: "Home"}) after executing the jobsDone action, considering I have a vuex file.

I also experimented with this.$router.replace('/').

Yet, I am still facing challenges resolving this issue.

The registration form can be found in Register.vue. It includes various form inputs for fullname, phone number, email, and password validation.

In my router/index.js file, the designated redirect page is named 'Home' with the path set to '/'.

Furthermore, I utilized the router-view component in the App.vue and Pro.vue files, specifically for admin users.

Pro.vue includes a navigation bar with features for displaying user information, selling products, and logging out.

I am seeking assistance to overcome the obstacles I am currently facing. Your support is greatly appreciated!

javascriptvue.jsvuexvue-routerrouter

Answer №1

In order to control the registration route, you will need to create a custom beforeResolve meta-function like this:

{
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      beforeResolve(routeTo, routeFrom, next) {
        // Check if user is logged in
        if (store.getters['auth/loggedIn']) {
          // Redirect to home page
          next({ name: 'home' })
        } else {
          // Proceed to login page
          next()
        }
      },
    },
  }

Check out this boilerplate code for reference.

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

Handling a JSON array error when working with a JSON string field

Attempting to create a JSONArray object with nested arrays and json strings, specifically looking at the "res" field. [{ "time": 123813213, "value": [{ "name": "task", "res": "{\"taskName\" : \"NAME\", \"ta ...

javascriptjavaarraysjson

AngularJS ng-repeat with dynamic ng-model is a powerful feature that allows for

I am attempting to dynamically generate the ng-model directive within an ng-repeat, but I am encountering a browser error. Our goal is to dynamically retrieve attributes of a certain type and set them in the DOM. The specific error I am receiving is: Err ...

javascriptangularjsangularjs-ng-repeatdynamically-generatedangularjs-ng-model

What is the best way to create a random key using a factory function?

I am working on a function that generates objects, and I would like to be able to specify the key for the object as a parameter. However, when I try to do this, the function does not recognize the parameter properly and sets its name as the key instead. h ...

javascriptreactjsreact-native

How can I create a custom checkbox in React Bootstrap without specifying an ID

I'm struggling to understand why this seemingly straightforward Bootstrap custom checkbox isn't functioning as expected. My project involves React, Bootstrap, and React-Bootstrap. import React from "react"; import ReactDOM from "react-dom"; impo ...

javascriptreactjscheckboxbootstrap-4

With vuejs, only one place can control the changing of v-model

Hello, I am currently working on integrating VueJS2 code with Laravel Blade. However, I have encountered an issue with the following VueJS2 code: new Vue({ el:'.add_item_to_price_menu', data:{ percentage:null, }, methods: ...

javascriptvue.jsvuejs2

Next.js encountered an issue when trying to read properties of null, specifically the 'push' property, resulting in a TypeError

I am utilizing the sweetalert2 library for displaying popups: export default function Home() { const MySwal = withReactContent(Swal) useEffect(() => { MySwal.fire({ showConfirmButton: false, customClass: { ...

javascriptreactjsnext.js

Error: The combination of 0 and .... is invalid and cannot be used as a function

I am currently in the process of developing a next.js application using Material-ui. I have been attempting to integrate material-ui into my project. Following guidance from the official GitHub page, I have copied the _app.js , _document.js , theme.js fil ...

javascriptreactjsmaterial-uinext.jsthemes

Is there a way to enable scroll on v-col?

I'm working on a layout that has specific requirements: The grey container should cover the entire viewport without exceeding it The green v-row should occupy the grey container entirely v-col 1 should utilize all available space and add a scrollbar ...

cssvue.jsflexboxvuetify.jsvuetifyjs3

Unable to assign a value to a property within an object using AngularJS

const objectData = {}; objectData[key]["digits"] = `${set.first},${set.second},${set.third},${set.fourth}`; When key is a numeric value, an error occurs: TypeError: Cannot set property 'digits' of undefined ...

javascriptangularjs

Ways to display a Tooltip automatically without needing to hover using only CSS

I have a tooltip that is set to appear when we hover over the div element, Is there a way to display the tooltip automatically when the page is refreshed without using Javascript? I am looking for a solution in pure CSS only. I attempted to remove displa ...

javascripthtmlcsstooltip

What is the best method for integrating UL / LI into JSON to HTML conversion?

Currently, I am working on converting a JSON string into HTML format. If you want to take a look at the code, here is the jsfiddle link: http://jsfiddle.net/2VwKb/4/ The specific modifications I need to make involve adding a li element around the model da ...

javascriptjsonjson2html

If there is no data defined, then it is necessary for at least one attribute to be present in the

I am encountering an issue while attempting to utilize Google Cloud's Pub/Sub API to send messages to topic subscribers. The error message I am receiving is "If data is undefined, at least one attribute must be present.". My intention is to integrate ...

javascriptnode.jsgoogle-cloud-functionsgoogle-cloud-pubsub

Dealing with dynamic CORS settings in Apache and PHP

Dealing with CORS has been quite a challenge for me. My javascript is sending AJAX Put/Fetch requests to an Apache/PHP script. In this particular scenario, the javascript is being executed on CodePen while the Apache/PHP script is hosted on a local serve ...

javascriptphpajaxapachecors

AngularJS Skype URI Button Problem

Implementing a Skype button in my project using AngularJS has been challenging. Here is the code I am currently working with: HTML: <script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script> <skype-ui ...

javascriptangularjsskypeskype-uri.js

"Utilizing jQuery to Trigger CSS3 Transform Animation Replays After a Set Number of Iterations

I currently have an animated image set up like this: <div class="image_for_sping"> <img src="/anyimage.png"> </div> The image has a style attribute added by jQuery which contains the following animation properties: animation: spin3 ...

javascriptjquerycsscss-animations

Methods for encoding and decoding special characters using either JavaScript or jQuery

I am looking for a solution to encode and decode various special characters using JavaScript or jQuery... ~!@#$%^&*()_+|}{:"?><,./';[]\=-` I attempted to encode them using the following code snippet... var cT = encodeURI(oM); // ...

javascriptphpjqueryhtmlencoding

Visual Studio Code's Intellisense is capable of detecting overloaded functions in JavaScript

What is the best way to create a JavaScript overload function that can be recognized by Visual Studio Code IntelliSense, and how can this be properly documented? A good example to reference is Jasmine's it() function shown below: function it(expecta ...

javascripttypescriptvisual-studio-code

Executing Code Upon Module Load and Presenting It as Middleware

I am currently delving into the intricacies of how exporting and importing modules function in Nodejs. One of my tasks involves using a specific file to seed a mongodb database. Surprisingly, this file operates flawlessly and delivers the desired results ...

javascriptnode.jsexpress

Anticipating the fulfillment of promises with the power of Promises.all

I have adopted the code found here for loading multiple .csv files. Upon successful loading of these files, my intention is to then render a react component. Below is the method located in datareader.js that I am currently working with. I am exploring the ...

javascriptreactjses6-promise

VueJS allows for the creation of interactive tables where users can click on a particular row to view more details about that specific row. This feature enhances

As a newcomer to VueJS, I'm facing what seems like a simple issue. Here's the problem: I've made an API call to fetch a set of records and want to display them in a basic table. But here's the catch - I want to be able to click a link ...

vue.js