报错：Avoided redundant navigation to current location: “/login“.完美解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了报错：Avoided redundant navigation to current location: “/login“.完美解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：

登陆之后才能查看主页面，否则跳转至登录页

遇到的问题：

一开始是打算直接在拦截器跳转路由的，发现会报错Avoided redundant navigation to current location: "/login".

后来灵机一动，用了全局路由守卫，完美解决

request.interceptors.request.use(config=>{
    config.headers['Content-Type']='application/json;charset=utf-8'
    let user=localStorage.getItem("user")
    if(!user){
        router.push("/login")
    }
    return config
},error=> {
    return Promise.reject(error)
})

报错：

报错：Avoided redundant navigation to current location: “/login“.完美解决,前端,vue.js,前端,javascript

解决方案：

添加全局路由守卫，并通过localStorage存储信息

全局路由守卫：

router.beforeEach((to,from,next)=>{
    let user = localStorage.getItem("user");
    if(!user){
        if(to.path!=='/login'){
            next({path:"/login"})
        }else{
            next()
        }
    }else{
        next()
    }
})

登录界面的逻辑判断：文章来源地址https://www.toymoban.com/news/detail-719452.html

         request.post("/user/login",this.form).then(
              res=>{
                if(res.code==='0'){
                  this.$message({
                    type:"success",
                    message:"登录成功"
                  })
                  localStorage.setItem("user",JSON.stringify(res.data))
                  this.$router.push("/")
                }else{
                  this.$message({
                    type:"error",
                    message:res.msg
                  })
                }
              }
          )

到了这里，关于报错：Avoided redundant navigation to current location: “/login“.完美解决的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！