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 当前时间多加一天、一小时、一分钟
datetime模块 import datetime # 获取当前时间 print(datetime.datetime.now()) # 2017-07-15 15:01:24.619000 # 格式 ...
- JavaScript 数组插入元素并排序
1.插入类排序 插入类排序的思想是:在一个已排好序的序列区内,对待排序的无序序列中的记录逐个进行处理,每一步都讲待排序的记录和已排好的序列中的记录进行比较,然后有序的插入到该序列中,直到所有待排序的记 ...
- cocos2d JS-(JavaScript) 冒泡排序
思想: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复以上的步骤,除了最 ...
- jenkins配置工程目录-启动case
1.我们在python里面编辑的脚本可以正常跑,但是在cmd里面跑就不行了,找不到自己定义的方法模块,这个时候我们要搞个环境变量 name : PYTHONPATH val : 工程目录路劲 ...
- Ansible学习实战手记-你想要知道的可能都在这里了
最近接触了ansible工具,查找了一些资料,也做了一些总结.希望能给刚接触的新手带来一些帮助. 此总结有实际例子,大部分也是从实践中用到才逐一总结的. 当然可能肯定一定会存在一些错误和纰漏,还望大家 ...
- Matlab的用法总结
1. 对序列进行洗牌 randperm() randperm()产生随机的序列 %if filepaths 是一个5*1的结构体,then cshuffle = randperm(length(fil ...
- 1、Storm集群安装
1.下载 本次选择1.2.2版本进行安装 解压安装到/opt/app目录下 2.配置环境变量 export STORM_HOME=/opt/app/apache-storm-1.2.2 export ...
- 2、Kafka架构
Kafka架构图 1)Producer :消息生产者,就是向kafka broker发消息的客户端. 2)Consumer :消息消费者,向kafka broker取消息的客户端 3)Topic :可 ...
- 绘制COCO数据集结果
import os import time import datetime import mmcv import cv2 as cv import json import numpy as np im ...
- freeswitch 获取当前网关通道数
1.使用show xmlstatus可以获取网关实时负载. 无session 有session