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 ...
随机推荐
- NodeJS的一些总结
NodeJS的一些总结 Node 公开宣称的目标是 “旨在提供一种简单的构建可伸缩网络程序的方法”. 当前的服务器程序有什么问题?我们来做个数学题. 在 Java™ 和 PHP 这类语言中,每个连接都 ...
- 剑指offer 面试62题
面试62题: 题目:圆圈中最后剩下的数字 题:0,1,...,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字. 解题思路:约瑟夫环问题,可 ...
- Multi-thread & Multi-process
关于多进程和多线程,教科书上最经典的一句话是“进程是资源分配的最小单位,线程是CPU调度的最小单位”. 对于到底是使用多进程还是多线程, 要根据实际情况来判断,选择更适合的. 具体情况,可以参考下面: ...
- windows8.1电话激活密钥
请断网安装Windows 8.1核心版:334NH-RXG76-64THK-C7CKG-D3VPT Windows 8.1专业版:XHQ8N-C3MCJ-RQXB6-WCHYG-C9WKB
- volume不能挂载mysql permission denied问题
参考 把玩jenkins docker镜像遇到的volume权限问题 docker run -d -v /root/jenkins:/var/jenkins_home -u 0 -P --name j ...
- java PinYinUtils 拼音工具类
package com.sicdt.library.core.utils; import java.util.HashSet; import java.util.Set; import net.sou ...
- 在看 jquery 源码中发现的一些优化方向
1. 避免使用 $.fn.each 或 $.each 因为它比原生的 for/while 真的会慢一些,循环次数越多差距越大. 另外,对象的 for-in 比 for 是要快一丢丢的,但数组的 for ...
- Delphi 2005 以上版本GIF动画播放设置
源: Delphi 2005 以上版本GIF动画播放设置
- 80211n标准建链速率计算
转:https://wenku.baidu.com/view/93f99dd3ad51f01dc281f1af.html 转:http://www.docin.com/p-1851128644.htm ...
- github使用——如何恢复被删去文件。
首先git删除文件包括以下几种情况 删除本地文件,但是未添加到暂存区: 删除本地文件,并且把删除操作添加到了暂存区: 把暂存区的操作提交到了本地git库: 把本地git库的删除记录推送到了远程服务器g ...