我在路由为 /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()跳转到指定路径时会无限循环的更多相关文章

  1. vue router的浏览器跳转行为

    最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...

  2. 10.vue router 带参数跳转

    vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...

  3. Vue Router实现页面跳转拦截

    场景: 某些页面需要登录之后才可以访问,在页面跳转前做处理,如果要访问的页面A需要登录,则强制调到登录页,并且记录要访问的页面A的链接,在登录成功后自动跳转到页面A 1.在router下的index. ...

  4. Vue 项目中断点没有跳转到指定源码的问题

    将配置中 devtool 改为以下即可. devtool: 'source-map' 如果是在 vue-cli 2.x ,那么就在 webpack.dev.config.js 中 如果是 vue-cl ...

  5. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. vue中路由拦截无限循环的情况

    router.beforeEach(async (to, from, next) => { if (token) { if (whiteList.indexOf(to.path) != -1) ...

  7. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

  8. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  9. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

随机推荐

  1. 001 unique string

    以后坚持每一个星期都写记到算法题,不论简单还是难,纯熟娱乐! 描写叙述: 实现一个算法来推断一个字符串中的字符是否唯一(即没有反复).不能使用额外的数据结构. (即仅仅使用主要的数据结构) 代码: # ...

  2. 标准c数学函数使用方法

    cppreference.com -> 标准c数学函数 -> 详解 标准c数学函数 abs 语法:     #include <stdlib.h>   int abs( int ...

  3. Linux 路径与命令搜寻顺序

    以相对/绝对路径运行命令,例如『 /bin/ls 』或『 ./ls 』: 由 alias 找到该命令来运行: 由 bash 内建的 (builtin) 命令来运行: 透过 $PATH 这个变量的顺序搜 ...

  4. VS 无法调试 IIS

    用附加的方式断点无效时.   解决方案: 一.VS设置的  .Net版本 与 IIS应用程序池的版本  不一致.   操作步骤: 1. 在VS-> 项目属性, 配置 自定义Web服务器 , 这里 ...

  5. iframe与父窗口之间数据互相获取

    Js/Jquery获取iframe中的元素 博客分类: jquery javascript jquery  在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或 ...

  6. Ubuntu环境变量配置

    根目录下的.bashrc文件中配置环境变量 export JAVA_HOME=/home/zn/softpackage/jdk1. export CLASSPATH=${JAVA_HOME}/lib ...

  7. 动手动脑:String.equals()的使用方法

    public class StringEquals { /** * @param args the command line arguments */ public static void main( ...

  8. SQL Server 简单事务学习

    select * from bank ) ) --打开一个事务 begin tran --定义临时变量 ; set @num = @num + @@error; --上一条语句出错次数 set @nu ...

  9. 019_Map Task数目的确定和Reduce Task数目的指定

    注意标题:Map Task数目的确定和Reduce Task数目的指定————自然得到结论,前者是后者决定的,后者是人为指定的.查看源码可以很容易看懂 1.MapReduce作业中Map Task数目 ...

  10. 如何理解Java程序使用Unicode字符集编写

    Java采用UTF-16编码作为内码,也就是说在JVM内部,文本是用16位码元序列表示的,常用的文本就是字符(char)和字符串(String)字面常量的内容.注:UTF-16是Unicode字符集的 ...