vue-router使用next()跳转到指定路径时会无限循环
我在路由为 /path 的页面这样写
beforeRouteLeave (to, from, next) {
console.log('离开路路由')
if(to.fullPath==='/home'){
next();
}else{
next('/home')
}
这个是组件路由,我想实现的效果是在这个页面点击浏览器的返回按钮后要返回 /home页面而不是上一个页面,上面的代码是没问题的,而我之前的写法就一直死循环
// 下面的写法会死循环
beforeRouteLeave (to, from, next) {
console.log('离开路路由')
next('/home')
}
我不太明白为什么会死循环,我在home页面也没有写任何钩子函数来跳到result页面啊,我也没有写全局的beforeEach钩子函数。
上面第一段代码是可用的,自己瞎摸索出来的,但是不是很明白为什么要加那个判断?
后来经过查阅资料得知vue-router的next()方法无参和有参时是不一样的
现在,算是大致理解了,当执行钩子函数时如果遇到next('/home')等时会中断当前导航,
比如当前导航是去/a,那么遇到next('/home')后就会把to.path改为/home,然后会重新触发这个离开的钩子,
注意:此时会重新触发执行这个钩子,而不是在这个钩子函数继续执行的,之前是一直没理解这里,
以为是执行next('/home')后就会直接跳到home页面呢,当重新触发后就会继续执行next('/home')所以会一直循环
。至于解决办法就是判断下,如果已经是/home了就next()。
vue-router使用next()跳转到指定路径时会无限循环的更多相关文章
- vue router的浏览器跳转行为
最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...
- 10.vue router 带参数跳转
vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...
- Vue Router实现页面跳转拦截
场景: 某些页面需要登录之后才可以访问,在页面跳转前做处理,如果要访问的页面A需要登录,则强制调到登录页,并且记录要访问的页面A的链接,在登录成功后自动跳转到页面A 1.在router下的index. ...
- Vue 项目中断点没有跳转到指定源码的问题
将配置中 devtool 改为以下即可. devtool: 'source-map' 如果是在 vue-cli 2.x ,那么就在 webpack.dev.config.js 中 如果是 vue-cl ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue中路由拦截无限循环的情况
router.beforeEach(async (to, from, next) => { if (token) { if (whiteList.indexOf(to.path) != -1) ...
- vue router 跳转到新的窗口方法
在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
随机推荐
- servlet 3.0 的新特性之三对异步处理的支持
一.异步处理 1. 什么是异步处理 原来,在服务器没有结束响应之前,浏览器是看不到响应内容的!只有响应结束时,浏览器才能显示结果! 现在异步处理的作用:在服务器开始响应后,浏览器就可以看到响应内容,不 ...
- PAAS、IAAS和SAAS区别
IaaS: Infrastructure-as-a-Service(基础设施即服务) 有了IaaS,你可以将硬件外包到别的地方去.IaaS公司会提供场外服务器,存储和网络硬件,你可以租用.节省了维护成 ...
- Autonomous System
自治系统(Autonomous System).在互联网中,一个自治系统(AS)是一个有权自主地决定在本系统中应采用何种路由协 议的小型单位.这个网络单位可以是一个简单的网络也可以是一个由一个 ...
- Python traps and pitfalls
@1: >>> def func(a, L=[]): ... L.append(a) ... print(L) ... >>> func(10) [10] > ...
- django-admin 设计User外键,设计model
设置外键 class profile_user(AbstractBaseUser, PermissionsMixin): company = models.ForeignKey(Company, de ...
- LeetCode:矩阵置零【73】
LeetCode:矩阵置零[73] 题目描述 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: [ [1,1,1], ...
- PAT 天梯赛 L1-033. 出生年 【水】
题目链接 https://www.patest.cn/contests/gplt/L1-033 AC代码 #include <cstdio> #include <cstring> ...
- java对象生命周期概述复习
最近看了下java对象的生命周期做个笔记复习复习,很多不同的原因会使一个java类被初始化,可能造成类初始化的操作: 1) 创建一个java类的实例对象. 2) 调用一个java类中的静态方法. ...
- iOS 学习@autoreleasepool{}
" ojc-c 是通过一种"referring counting"(引用计数)的方式来管理内存的, 对象在开始分配内存(alloc)的时候引用计数为一,以后每当碰到有al ...
- Wi-Fi基带芯片和Wi-Fi无线网卡设计方案
转:http://wenku.baidu.com/link?url=Q0ImC 0IIG7qrbB8DpGrrU3aOYvxNYCyHsxukspH8XMCDYMjYMPSJq_TCISC5amsNY ...