vue-router beforeEach死循环
vue中页面跳墙处理
页面跳墙中使用
vue-router
中的beforeEach
的死循环问题
- 问题展现
import Router from 'vue-router'
const router = new Router({
{path: '/', component: index },
{path: '/login', component: login},
{path: '/error', component: error},
{path: '*', component: error}
})
router.beforeEach((to, from, next) => {
const isLogin = sessionStorage.getItem('loginData')
if (isLogin) {
next()
} else {
next('/error')
}
})
最近在使用时,一直陷入死循环,当时的想法是如何将路由提取出来,脱离
beforeEach
的控制,之后发现不可行。上面问题再现,会出现死循环,因为/error
会在进入前 又要进入beforeEach
中 ,这样就会一直循环下去
所以就是想如何跳出这个循环即可
router.beforeEach((to, from, next) => {
const isLogin = sessionStorage.getItem('loginData')
if (isLogin) {
next()
} else {
//next('/error')
if (to.path === '/error') { //这就是跳出循环的关键
next()
} else {
next('/error')
}
}
})
这样写,其实这个会执行两次,第二次进来是以
/error
的路由进来的
总结
- 看文档也需要 实践哈
vue-router beforeEach死循环的更多相关文章
- vue router.beforeEach(),详解
outer.beforeEach()一般用来做一些进入页面的限制. 比如没有登录, 就不能进入某些页面,只有登录了之后才有权限查看某些页面...说白了就是路由拦截.第一步 规定进入路由需不需要权限 @ ...
- 【vue】 router.beforeEach
import store from '@/store' const Vue = require('vue') const Router = require('vue-router') Vue.use( ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue router拦截 如果用户并未登录直接跳转到登录界面(最简单的cookie演示)
router.beforeEach(function(to,from,next){ console.log('路由拦截') console.log(to.name) console.log(from. ...
- vue router拦截器的简单使用
之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过 ...
- Vue router 全局路由守卫
记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...
- Vue Router的配置
1.beforeEnter function requireAuth (route, redirect, next) { if (!auth.loggedIn()) { redirect({ path ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
随机推荐
- python框架之Flask(5)-@app.before_request原理
示例 from flask import Flask app = Flask(__name__) @app.before_request def xx(): pass @app.route('/') ...
- xshell 6评估已过期解决办法 / xftp 6 评估已过期解决办法
1.工具用途介绍 Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议.Xshell 通过互联网到远程主机的安全 ...
- 55.Vue环境搭建
Vue环境搭建 在搭建过程中出现的错误解决办法 https://www.cnblogs.com/lovebing/p/9488198.html cross-env使用笔记 cross- ...
- guest project <web接口开发与自动化测试>
一次写接口,简单记录一下... 参照虫师大大的书写的,有做小的修改... github上guest项目地址:git@github.com:lixiaofeng1993/guest.git web ap ...
- TCP三次握手--syn攻击
TCP握手协议 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确 ...
- 【题解】Luogu P2057 [SHOI2007]善意的投票
原题传送门 我们一眼就能看出这是一道最小割的题 我们设不睡觉这种状态为S,睡觉这种状态为T 对于每个人,如果不想睡觉,就从S向这个人连流量为1的边,否则,就从这个人向T连流量为1的边 对于每一对朋友, ...
- centos7救援模式--单机模式(单用户模式)
前序 经典问题: 单机模式, 当系统忘记某用户登录密码的时候可以解决密码重置问题 操作 1 开机的时候出现选择进入系统的界面时, 按E键 2 选择定位到ro这里, 替换成rw init=/sysroo ...
- 剑指offer(55)链表中环的入口节点
题目描述 给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. 题目分析 1.一快一慢指针,先找到碰撞点. 2.然后碰撞点到入口节点的距离就是头结点到入口节点的距离. 具体原理可 ...
- urllib3
urllib3是一个功能强大.条理清晰.用于http客户端的python库,相对于urllib它所有的特点如下: 线程安全 连接池 客户端SSL/TLS验证 使用多部分编码上传文件 Helpers用于 ...
- HAProxy + Keepalived + Flume 构建高性能高可用分布式日志系统
一.HAProxy简介 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代 理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点, ...