相关疑难解决方法(0)

为什么 vue-router 给我这个错误？需要明确的是，登录流程按预期工作，但我想 a) 摆脱 errro 和 b) 了解错误发生的原因。

错误：

Uncaught (in promise) Error: Redirected from "/login" to "/" via a navigation guard.

登录流程

1. 开始注销，但输入一个需要身份验证的 URL（即除了“/login”之外的任何内容）
2. 被重定向到“/login”（如预期的那样）。
3. 登录
4. 成功重定向到从步骤 #1 开始的 Url，除了上述错误。

登录操作：

doLogin({ commit }, loginData) {
  commit("loginStart");
  axiosClient
    .post("/jwt-auth/v1/token", {
      username: loginData.username,
      password: loginData.password,
    })
    .then((response) => {
      commit("loginStop", null);
      commit("setUserData", response.data);
      this.categories = airtableQuery.getTable("Categories");
      commit("setCategories", this.categories);
      this.locations = airtableQuery.getTable("Locations");
      commit("setLocations", this.locations);
      router.push("/"); // push to site root after authentication
    })
    .catch((error) => {
      console.log(error.response.data.message);
      commit("loginStop", error.response.data.message);
      commit("delUserData"); …

尝试使用导航守卫，但next('/auth/login')给出无限循环：

router.beforeEach((to, from, next) => {
  auth.validate().then((valid) => {
    if (!valid) {
      next('/auth/login')
    } else {
      next()
    }
  })
})

路由器定义：

const router = new Router({
  routes: [
    {
      name: 'login',
      path: '/auth/login',
      component: login
    }
})

我有上面标题中定义的 vue 路由器问题。

假设我有一个router-view当用户从页面选择器组件中选择页面时动态呈现页面。我期待的是我必须让网址是这样的：

http://localhost:port/editor/{appSlug}/layout-editor/page/{pageSlug}

但相反，我得到了这个：

http://localhost:port/editor/{appSlug}/layout-editor/page/{pageSlug}-randomString

控制台显示此错误：

NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "导航到当前位置 ("/editor/penerimaa.../page/input-pendaftaran-edrpekvl") 是不允许的", stack: "Error? at new NavigationDuplicated (webpack-int…/node_modules/vue/dist/vue.runtime.esm.js:3876:9)"}`

我已经检查了路由器文件，但仍然无法找出我的路由有什么问题。我也尝试了这个问题的解决方案，但仍然有这个错误。

有人可以帮我解决这个问题吗？

请看一下我的代码：

router.js

import Vue from 'vue'
import Router from 'vue-router'
import store from './store/index'

import Home from './views/home/Index.vue'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  routes: [{
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      // route …

我正在使用 Vuetify，但似乎无法解决此问题。我有一个<v-list>在我<v-navigation-drawer>看起来像这样：

SideDash.vue 组件

<template>
    <v-navigation-drawer
        v-model="drawer" clipped
        :mini-variant.sync='mini'
        width=240 absolute permanent
    >
        <v-list
            flat dense nav class="py-1"
        >
            <v-list-item-group color='primary' mandatory>
                <v-list-item
                    v-for="item in items"
                    :key="item.title"
                    dense
                    router :to="item.route"
                >
                    <v-list-item-icon>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-title>{{ item.title }}</v-list-title>
                    </v-list-item-content>

                </v-list-item>
            </v-list-item-group>
        </v-list>
    </v-navigation-drawer>
</template>


<script>
export default {
    data() {
        return {
            drawer: true,
            items: [
                {icon: 'mdi-speedometer', title:'Dashboard', route:'/dashboard'},
                {icon: 'mdi-tools', title:'Tools', route:'/tools'}
            ],
        }
        
    }
    
}
</script>

路由器/index.js

import Vue from 'vue' …

我在 vue 路由上添加身份验证，但它没有重定向回登录页面。

给出这个错误

Error: Navigation cancelled from "/" to "/pages/login" with a new navigation.

这是我在路线上应用它的方法

router.beforeEach((to, from, next) => {

  

    // If auth required, check login. If login fails redirect to login page

    if (!(auth.isAuthenticated())) {

        router.push({ path: '/pages/login', name: 'page-login', component: '@/views/pages/login/Login.vue' })
       

    }

    return next()
       

})

我认为它在循环内并且重定向太多次