L
L
lookingfor22021-06-06 19:40:28
Vue.js
lookingfor2, 2021-06-06 19:40:28

How to fix a routing error?

There is such an error

Avoided redundant navigation to current location: "/3".

Here I am trying to make a route
next: async function (e) {
            const data = new FormData(e.target);
            // console.log(this.$router)
            const response = await apiQuestion('POST', this.$route.params.step, data);
            if (response.data.success){
                await this.$router.push({name: 'step'}).catch(error =>{
                    console.error(error);
                });
            }
            if(!response.data.success){
                this.$toast.error(response.data.message);
            }
        }

Here is the router

import {apiGetUser} from "../api/api.ts";


import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    base: "quiz/",
    routes: [
        {
            path: "/:step([1-9]{1}|[1-9]{2})",
            name: "step",
            component: () => import('../components/Question.vue'),
            beforeEnter: async (to, from, next) => {
                const user = await apiGetUser();
                if (user.data.data.ended) {
                    return next({ name: 'finish' });
                }

                if (user.data.data.step !== to.params.step) {
                    return next({ name: 'step', params: {step: user.data.data.step} });
                }

                return next();
            }
        },
        {
            path: "/finish",
            name: "finish",
            component: () => import('../components/EndedQuiz.vue'),
            beforeEnter: async (to, from, next) => {
                const user = await apiGetUser();
                if (!user.data.data.ended) {
                    return next({ name: 'step', params: {step: user.data.data.step} });
                }

                return next();
            }
        },
        {
            path: '*',
            component: () => import('../components/NotFound.vue'),
        }
    ],
});

export default router;

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question