Vue全局路由跳转失败

Question

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 || '/')
            }

Answer 1

• 文章：【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. 没有给出相关的代码片段或页面截图，无法进一步排查问题。