vue 路由报错？

  • Z时代
  • 2024-02-07
  • 分类：IT

问题描述

vue 导航报错

问题出现的平台版本及自己尝试过哪些方法

Redirected when going from "/" to "/login" via a navigation guard.
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1711:15)
    at createNavigationRedirectedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1696:10)
    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1995:17)
    at eval (webpack-internal:///./src/router/index.js:36:5)
    at iterator (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1985:7)
    at step (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1749:9)
    at step (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1753:9)
    at runQueue (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1757:3)
    at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2010:3)
    at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1897:8)

相关代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../components/layout/Layout'
import local from '@/util/local'
Vue.use(VueRouter)
const routes = [
  {
    path: '/login',
    name: 'login',
    component:  () => import('../views/Login.vue')
  },
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: 'home',
        // route level code-splitting
        // this generates a separate chunk (home.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
      }
    ]
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
router.beforeEach((to, from, next) => {
  // 判断用户是否已经登录
  const isLogin = local.get('token') ? true : false;
  if (to.path === '/login'&&isLogin) {
    // 如果用户已经登录，则重定向到主页
    next('/home') 
  } else{
      next() 
  }
});
export default router

你期待的结果是什么？实际看到的错误信息又是什么？

怎么解决这个报错，通过islogin 判断 已经登录就跳转到首页，没登录就跳转到登录页 。

回答：

你在已经登录的情况下访问根路径/时也会触发路由守卫，并且被重定向到登录页 /login，从而形成了循环重定向的情况
修改：

router.beforeEach((to, from, next) => {
  // 判断用户是否已经登录
  const isLogin = local.get('token') ? true : false;
  if (to.path === '/login' && isLogin) {
    // 如果用户已经登录，则重定向到主页
    next('/home') 
  } else if (to.path !== '/login' && !isLogin) {
    // 如果用户未登录且不是访问登录页，则重定向到登录页
    next('/login')
  } else {
    next() 
  }
});

回答：

vue 路由报错？
isLogin一直为false, 这里可能进到死循环了

以上是 vue 路由报错？ 的全部内容， 来源链接： utcz.com/p/934639.html

回到顶部