我在路由为 /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. (2)sql server 跨网段复制

    转自:http://www.cnblogs.com/gaizai/p/3328511.html 一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) ...

  2. Ubuntu14.04下Nginx反向代理Odoo域名

    安装nginx sudo apt-get install -y nginx 修改配置文件 vi /etc/nginx/nginx.conf #注释掉下面这行代码 #include /etc/nginx ...

  3. 基于nodejs的wiki系统

    jingo:        https://github.com/claudioc/jingo nodewiki:    https://github.com/nhoss2/nodewiki Tidd ...

  4. 一种基于自定义代码的asp.net网站访问IP过滤方法!

    对于一些企业内部核心系统,特别是外网访问的时候,为了信息安全,可能需要对外部访问的IP地址作限制,虽然IIS中也提供了根据IP地址或IP地址段进行限制或允许,但并没有提供根据IP地址所在的城市进行限制 ...

  5. iOS WKWebView OC 与 JS 交互学习

    我写WKWebView 想让 服务端相应 一个 方法但是不响应,根据 UIWebView 用 JSContext就能拿到响应的处理经验是不是服务端 也需要 对 WKwebView有兼容的一个写法??? ...

  6. Linux Shell基础 单引号、双引号、反引号、小括号和大括号

    单引号和双引号 单引号和双引号用于变量值出现空格时将字符用引号括起来. 二者的主要区别在于, 被单引号括起来的字符都是普通字符,就算特殊字符也不再有特殊含义: 被双引号括起来的字符中,"$& ...

  7. 常用模块----time&random&hushlib&os

    模块:本质就是一个.py文件 分为三部分: 内置模块 第三方模块 自定义模块(模块调用,包) 加载顺序:内置模块——>自定义模块   time 模块 # <1> 时间戳 >&g ...

  8. PHP辅攻_[学习资料收集]PHP连接SQLServer2005方法

    PHP连接SQLServer2005 1.修改php.ini将extension=php_mssql.dll的注释删除保存. 修改php.in将mssql.secure_connection = Of ...

  9. 20145210姚思羽《网络对抗》MSF基础应用实验

    20145210姚思羽<网络对抗>MSF基础应用实验 实验后回答问题 1.用自己的话解释什么是exploit,payload,encode. exploit就是进行攻击的那一步 paylo ...

  10. Android系统--Binder系统具体框架分析(一)补充

    Android系统--Binder系统具体框架分析(一)补充 补充:对Binder驱动分析一的代码补充,添加saygoobye和saygoodbye_to服务 test_server.h #ifnde ...