Vue全局路由跳转失败

vue2我想实现访问requiresAuth页面自动跳转到login页面,登录后再重定向到之前输入的url地址中,但是一直报错
Uncaught runtime errors:
Redirected when going from "/login?redirect=%2Fprojects" to "/projects" via a navigation guard.
本人刚学习vue不是很懂,望大家指点下。

版本:

{
  "name": "test_p",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/cli-plugin-router": "^4.5.19",
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.13",
    "vue": "^2.6.14",
    "vue-router": "^3.6.5",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "lint-staged": "^11.1.2",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
Vue.use(VueRouter)
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */'@/views/login')
  },
  {
    path: '/',
    component: () => import(/* webpackChunkName: "layout" */'@/views/layout'),
    meta: { requiresAuth: true },
    children: [
      {
        path: '',
        name: 'home',
        component: () => import(/* webpackChunkName: "home" */'@/views/home')
      },
      {
        path: 'members',
        name: 'members',
        component: () => import(/* webpackChunkName: "member" */'@/views/members')
      },
      {
        path: 'projects',
        name: 'projects',
        component: () => import(/* webpackChunkName: "project" */'@/views/projects')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.current_user) {
      return next({
        name: 'login',
        query: {
          redirect: to.fullPath
        }
      })
    }
    next()
  } else {
    next()
  }
})
export default router

login.vue

// 使用axios发送的请求
 if (res.message === '登录成功') {
                console.log(res, '<-------------')
                this.$store.commit('set_user', res.token)
                this.$store.commit('get_nick_name', res)
                this.$router.push(this.$route.query.redirect || '/')
            }

img

img

  • 文章:【Vue】Login 登录项目案例 代码开源 中也许有你想要的答案,请看下吧
  • 除此之外, 这篇博客: 登录注册vue中的 新建Login.vue页面 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 在src中新建pages/Login.vue

    <template>
      <div>
        <div class="login-wrap" v-show="showLogin">
          <h3>登录</h3>
          <p v-show="showTishi">{{tishi}}</p>
          <input type="text" placeholder="请输入用户名" v-model="username">
          <input type="password" placeholder="请输入密码" v-model="password">
          <button v-on:click="login">登录</button>
          <span v-on:click="ToRegister">没有账号?马上注册</span>
        </div>
    
        <div class="register-wrap" v-show="showRegister">
          <h3>注册</h3>
          <p v-show="showTishi">{{tishi}}</p>
          <input type="text" placeholder="请输入用户名" v-model="newUsername">
          <input type="password" placeholder="请输入密码" v-model="newPassword">
          <button v-on:click="register">注册</button>
          <span v-on:click="ToLogin">已有账号?马上登录</span>
        </div>
      </div>
    </template>
    
    <style>
    .login-wrap {
      text-align: center;
    }
    input {
      display: block;
      width: 250px;
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      margin-bottom: 10px;
      outline: none;
      border: 1px solid #888;
      padding: 10px;
      box-sizing: border-box;
    }
    p {
      color: red;
    }
    button {
      display: block;
      width: 250px;
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      border: none;
      background-color: #41b883;
      color: #fff;
      font-size: 16px;
      margin-bottom: 5px;
    }
    span {
      cursor: pointer;
    }
    span:hover {
      color: #41b883;
    }
    </style>
    
    <script>
    export default {
      data() {
        return {
          showLogin: true,
          showRegister: false,
          showTishi: false,
          tishi: '',
          username: '',
          password: '',
          newUsername: '',
          newPassword: ''
        }
      },
      methods: {
       login() {
          if (this.username === '' || this.password === '') {
            alert('请输入用户名或密码')
          }
        },
        register() {
          if (this.newUsername === '' || this.newPassword === '') {
            alert('请输入用户名或密码')
          } else {
          }
        },
        ToLogin() {
          this.showRegister = false
          this.showLogin = true
        },
        ToRegister() {
          this.showRegister = true
          this.showLogin = false
        }
      }
    }
    </script>
    
    

    Home.vue

    <template>
        <div>
            <h3>欢迎 {{name}}</h3>
            <a href="#" @click="quit">注销登录</a>
        </div>
    </template>
    
  • 以下回答由chatgpt基于相关博客总结生成:
    1. 我无法获取您使用的Vue版本。
    2. 问题现象和报错信息未给出,无法解答。
    3. 您期望实现的功能是跳转和重定向操作,具体实现方式需要根据具体场景来确定。比如跳转到某个页面可以使用Vue Router提供的编程式导航方法,重定向可以使用Vue Router提供的重定向功能。具体代码实现取决于具体场景和需求。
    4. 没有给出完整的login.vue文件代码,无法解答。
    5. 没有给出相关的代码片段或页面截图,无法进一步排查问题。