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 ...
随机推荐
- 拟牛顿法——DFP、BFGS、L-BFGS
DFP 该算法的核心是:通过迭代的方法,对Hk+1(-1)近似.迭代方式: 其中D0通常取为单位矩阵,关键是每一步构造矫正矩阵△Dk. 考虑△Dk 的待定形式为 拟牛顿的条件 这里插播一下拟牛顿的条件 ...
- 剑指offer 面试42题
面试42题: 题目:连续子数组的最大和 题:输入一个整形数组,数组里有正数也有负数.数组中的一个或连续多个整数组成一个子数组.求所有子数组的和的最大值.要求时间复杂度为O(n) 解题思路:在数组里从前 ...
- More on Class Loading and Initialization
上一篇博客中对于类的加载和初始化进行了详细的说明,但上一篇博客代码中的main()所在的类为导出类, 对其中一些问题的理解可能会引起误导和不明确,所以补充这篇博客进一步说明.以下面的代码为例进行说明: ...
- oracle数据向历史表数据迁移————procedure
create or replace procedure remove_refund_his_pro isbegin declare cursor refund_query_cur is select ...
- ruby rails 安裝
安装之前先更换Ubuntu的源 https://www.cnblogs.com/znsongshu/p/9452067.html http://gems.ruby-china.org/ 一/安 ...
- PAT 天梯赛 L1-032. Left-pad 【字符串】
题目链接 https://www.patest.cn/contests/gplt/L1-032 思路 要分两种情况处理 ①字符串长度 <= 填充长度 就在字符串前面输出(填充长度 - 字符串长度 ...
- Apache Kudu
Apache Kudu是由Cloudera开源的存储引擎,可以同时提供低延迟的随机读写和高效的数据分析能力.Kudu支持水平扩展,使用Raft协议进行一致性保证,并且与Cloudera Impala和 ...
- Linux文件系统管理 开机自动挂载及fstab文件修复
概述 开机自动挂载及fstab文件修复 开机自动挂载 实现开机后自动挂载,就需要修改系统的自动挂载文件 /etc/fstab.因为系统就是依赖这个文件决定启动时加载的文件系统的.通过vi 打开/etc ...
- Linux文件系统管理 文件系统
概述 文件系统:文件系统这个名词大家都很陌生,不过如果说成分区,大家就比较容易理解了.原先每个分区只能格式化为一个文件系统,所以我们可以认为文件系统就是指分区.不过随着技术的进步,现在一个文件系统可以 ...
- 【HackerRank】Lonely Integer
There are N integers in an array A. All but one integer occur in pairs. Your task is to find out the ...