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 ...
随机推荐
- recyclerView布局
http://blog.csdn.net/lmj623565791/article/details/45059587
- mapdb与Redis区别:
Redis也能完全相同的工作,但必竟其独立于JVM之外通过Socket交互,能达到10万次/秒就很不了不起了 mapdb可直接嵌入到JVM运行空间,运行效率是Redis没法比的,单线程能达到 30万次 ...
- python 报错——Python TypeError: 'module' object is not callable 原因分析
原因分析:Python导入模块的方法有两种: import module 和 from module import 区别是前者所有导入的东西使用时需加上模块名的限定,而后者则不需要 例: >&g ...
- mysql学习笔记—常用sql语句
sql注意事项: SQL 对大小写不敏感:SELECT 与 select 是相同的 某些数据库系统要求在每条 SQL 语句的末端使用分号. CREATE DATABASE CREATE DATABAS ...
- (扫盲)DTO数据传输对象
DTO即数据传输对象.但从定义上看就是简单的用来传递数据的.主要用途是在框架中定义DTO来绑定表现层中的数据.学过MVC.EF实体模型的都应该知道,我们可以定义一个Model实体来实现前后台数据的交互 ...
- 曾经跳过的坑------JS中对象与结构体的声明和调用
直接上代码 正确的写法 //同一个ready方法中var viewModel = { // self.projectCode = PROJECT_CODE; BOOKEDCOUNT : 5, TOTA ...
- Informatica can bind a LONG value only for insert into a LONG column Oracle
Informatica实现etl同步表数据信息时 报: Severity Timestamp Node Thread Message Code Message ERROR 2016/8/8 17:32 ...
- JDK1.8(JRE)和eclipse-jee不匹配解决放
想要用eclipse-jee的话,需要jdk1.8一下版本才能用. 1.需要下载jdk1.7 2.把jdk1.7安装(不需要设置环境变量). 3.在项目上右击选择properties 4.选择Java ...
- PHP下使用Redis消息队列发布微博
phpRedisAdmin :github地址 图形化管理界面 git clone [url]https://github.com/ErikDubbelboer/phpRedisAdmin.git[ ...
- keepalived nginx 主备配置
keepalived nginx 主备配置(多主多备同理) 1.Nginx服务安装 nginx 不区分主备,在两台服务上安装两个即可. 安装参考:https://www.cnblogs.com/zw ...