vue 中 beforeRouteEnter 死循环的问题

如果在 vue 组件的 beforeRouteEnter 钩子函数中调用 API 请求，会出现循环执行的问题：

  beforeRouteEnter(to, from, next) {
   login().then(() => {
    next({ name: 'home' });
  }).catch(() => {
   next();
   });
  },

上面的代码会出现无限循环调用的问题，可能是API还没有请求完成，又一次进入 router，调用了 beforRouterEnter 的原因，解决办法加一个变量，在调用API之前判断一下：

 let request = false;
  beforeRouteEnter(to, from, next) {
  if (request) {
   next();
   return;
  }
   request = true;
   login().then(() => {
   next({ name: 'home' });
  });
 },

ps：关于vue中beforeRouteEnter使用的误区

在写项目的时候偶然遇到了一个问题，在进入一个城市选择页面时，城市列表总是需要一秒后才能加载出来，出现了页面抖动，在解决这个问题时想到了路由中的beforeRouteEnter方法，在路由跳转前加载数据，在网上发现有博客说可以使用如下写法来解决这个问题：

这样写是毫无效果的， 经过仔细分析官方文档后发现next中的函数执行在页面mounted之后，所以这种方法时是不正确的。还不如直接将数据获取绑定到create钩子上。

正确写法如下：

这样就在跳转前获取到了数据，改写后完全解决了页面抖动的问题。

总结

以上所述是小编给大家介绍的vue 中 beforeRouteEnter 死循环的问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 对Vue beforeRouteEnter 的next执行时机详解

    背景 今天在用vue实现界面的时候,想在beforeRouteEnter钩子函数中去获取数据,然后通过next方法设置到跳转页面的实例中,结果发现数据一直没办法在界面渲染的时候赋值,苦思不得其解,遂google之,终寻原因,记录之. 注意 beforeRouteEnter (to, from, next) { console.log(this); //undefined,不能用this来获取vue实例 console.log('组件路由钩子:beforeRouteEnter'); next(vm

  • vue 中 beforeRouteEnter 死循环的问题

    vue 中 beforeRouteEnter 死循环的问题

    如果在 vue 组件的 beforeRouteEnter 钩子函数中调用 API 请求,会出现循环执行的问题: beforeRouteEnter(to, from, next) { login().then(() => { next({ name: 'home' }); }).catch(() => { next(); }); }, 上面的代码会出现无限循环调用的问题,可能是API还没有请求完成,又一次进入 router,调用了 beforRouterEnter 的原因,解决办法加一个变量,在

  • 在vue中利用全局路由钩子给url统一添加公共参数的例子

    有的时候我们可能有这样的需求,比如现在url为m.taoyuewenhua.com/#/ 我们需要在用户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转任何url的时候,都要在url携带上这个参数.就变成m.taoyuewenhua.com/#/&abc=xxx; 这个参数称为"公共参数"; 那么,我们该如何做呢?因为vue中有很多组件.在每个组件都写的话,太麻烦.所以这个时候,全局路由钩子登场了.分别是 router.beforeEach 全局导航

  • Vue中keep-alive 实现后退不刷新并保持滚动位置

    什么是KeepAlive? 首先,我们要明确我们谈的是TCP的 KeepAlive 还是HTTP的 Keep-Alive.TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念,不能混为一谈.实际上HTTP的KeepAlive写法是Keep-Alive,跟TCP的KeepAlive写法上也有不同. TCP的keepalive是侧重在保持客户端和服务端的连接,一方会不定期发送心跳包给另一方,当一方端掉的时候,没有断掉的定时发送几次心跳包,如果间隔发送几次,对方都返回的是RST,

  • 在vue中实现禁止回退上一步,路由不存历史记录

    在有些情况下,我们不想往路由里添加历史记录.(vue的项目,vue-router中不想存历史记录) 根据vue官网提供的,楼主总结了一下,主要有以下几种方案: 根据官网的解释 .声明式路由和编程式路由都是添加新的记录,同时vue还提供了replace来替换路由记录,从而实现路由不存历史记录的情况,以下是楼主总结的几种方法: 1.声明式路由 2.编程式 3.原生js实现 楼主晚上回去看了一下<js高程>,原生实现替换路由,不记录历史记录的方法 window.open("http://w

  • Vue中watch、computed、updated三者的区别及用法

    1.watch 理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作 1.监听值类型(简单类型)数据 //在一个vue实例中 new Vue({ el:"#myApp", data:{ num1:1, num2:2 }, methods:{}, watch:{ //这里两个属性,第一个值是变化后最新的值,第二个是变化前 num1(after,before){ this.num2 = after +1 } immediat

  • 解决Vue中使用keepAlive不缓存问题

    1.查看app.vue文件,这个是重点,不能忘记加(我就是忘记加了keep-alive) <template> <div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"><

  • Vue中keep-alive组件的深入理解

    前言 最近在写Vue项目的时候,遇到了一个问题,我从A路由使用parmas方式传参跳转到B路由,然后从B路由跳转到C路由,再从C路由返回B路由的时候,发现从A路由传到B路由的参数已经不存在了. 正文 我们都知道,vue组件进行路由跳转时,会销毁当前组件.所以从其他路由返回当前路由时,当前路由会重新执行生命周期钩子函数.这就导致了上述问题,A路由传到B路由的参数没了. 当遇到这种问题的时候,我们会首先想到,我们能不能让B路由的数据保存下来呢?这就不得不提到Vue的一个组件了,它就是keep-ali

  • 在vue中嵌入外部网站的实现

    在vue中嵌入外部网站的实现

    利用iframe top:导航栏的height left:左侧菜单栏的width src:右侧页面要嵌入的外部网站 <template> <div> <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:64px;left:

  • Vue中路由守卫的具体使用

    Vue中路由守卫的具体使用

    目录 1.全局守卫 1.1 全局前置守卫 1.2 全局后置路由守卫 1.3 整合 2. 路由独享的守卫 3.组件内的守卫 作用:对路由进行权限控制 分类:全局守卫.独享守卫.组件内守卫 1.全局守卫 1.1 全局前置守卫 顾名思义,前置守卫主要是在你进行路由跳转之前根据你的状态去 进行一系列操作(全局前置是为在路由初始化以及跳转之前都会触发) 你可以使用router.beforeEach注册一个全局前置守卫(Each:每个,即在任意一个路由跳转的时候都会触发) 每个守卫方法接收三个参数: to:

  • vue中vue-router的使用说明(包括在ssr中的使用)

    vue中vue-router的使用说明(包括在ssr中的使用)

    目录 安装vue-router 创建配置文件 路由映射规则配置 路由设置内容 入口文件配置 app.vue配置 router中使用props 其他配置属性 导航守卫 vue笔记之vue-router的使用(包括ssr中的使用) 安装vue-router 命令行执行: npm i vue-router -S 创建配置文件 在项目src文件夹下创建config文件夹存放路由配置 在config文件夹下新建router.js和routes.js router.js: 存放路由设置 routes.js:

随机推荐