[vuejs 踩坑实战系列] keep-alive 被 beforeRouteEnter 骗了

MrZONT 发布于2019-08-26 12:21 / 2612人阅读

摘要：大家中秋假期快乐，假期分享一些实战文章给大家，原创不易，欢迎转发，一起学习现在大家基本都在单页应用里面使用了来缓存不活动的组件实例，而不是销毁它们。

大家中秋假期快乐，假期分享一些实战文章给大家，原创不易，欢迎转发，一起学习

现在大家基本都在单页应用里面使用了 keep-alive 来缓存不活动的组件实例，而不是销毁它们。

如果你还没有使用，可以看看官方的介绍（如果大家需要一些新手入门的文章可以留言哈）：https://cn.vuejs.org/v2/api/#...

用法很简单：主要是包裹

...

使用场景：

和单页应用环境配合使用的：

有以下几个常识，如果你还没有使用 keep-alive 的话，可以记下来：

1、组件内的第一次的生命周期：

mounted ==> activated

2、切换路由再次进来只会触发 activated

3、可以通过 router 的钩子函数 beforeRouteEnter 来做一些辅助判断

具体可以看看官方的这个的文档：https://router.vuejs.org/zh/g...

不能获取组件实例 this

比如你要设置 data 里面的变量，抱歉，这里操作不了，那如何做呢？

很多熟悉的人会想到 next 操作 vm 对象：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

是的，这里你可以通过 from.name 来做一些判断，比如如下代码片段：

需求很简单，判断一下从特定路由切换过来，做一个判断赋值给 data 的 isFromTester

beforeRouteEnter (to, from, next) {
  console.log(to, from);
  if (from.name == "Tester") {
    next(vm => {
      vm.isFromTester = true
    })
  } else {
    next(vm => {
      vm.isFromTester = false
    })
  }
}

然后你就可以在 activated 生命周期直接判断啦

activated () {
  if (this.isFromTester) {
    //...
  }
}

大功告成啦

抱歉，这里的 activated 不会那么及时地更新 isFromTester，所以第一次你获取的不是 true，第二次是可以的

那我们就要来刨根问底了，到底为啥不是及时更新的呢？

有没有人想到了 vue 里面一个很常见的 nextTick 这个东西？

是滴，就是它，它骗了 activated，真相在这里：（我们省去了很多路由事件里面自己的处理逻辑和 vue activated 的 hook 的触发）

GPU云服务器云服务器被vps骗了怎么办腾讯云服务器被骗了 spark入门实战系列 beforeRouteEnter

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108555.html

另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

摘要：如何添加这个条件，判断用户是否刷新了页面呢我们知道，当使用后，只有第一次进入后会触发钩子函数，再次进入就不再执行了。目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。注：　此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求...

Ocean 2019-08-21 17:43 评论0 收藏0
vue中keepAlive的使用

摘要：文档在及其更高版本中，和将会在树内的所有嵌套组件中触发。另外，在我们的项目中遇到路由相同但参数不同的情况组件被复用，不更新的问题，官方给出了响应路由参数变化根据参数数据响应前言在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。可以用以下几种方案解决问题...

Anleb 2019-08-23 18:22 评论0 收藏0
[vuejs 踩坑实战系列] 路由场景下父子组件的生命周期顺序来个刨根问底

摘要：大家中秋假期快乐，假期分享一些原理设计文章给大家原创不易，欢迎转发，一起学习凌晨写的，不容易哈，收藏或者点个赞吧在常见的单页应用中，我们都会有一个根文件，里面放置一个然后配置路由来切换很多人在子父组件嵌套关系下的生命周期钩子函数如何应用，大家中秋假期快乐，假期分享一些原理设计文章给大家原创不易，欢迎转发，一起学习(凌晨写的，不容易哈，收藏或者点个赞吧) 在常见的单页应用中，我们都...

FreeZinG 2019-08-26 12:21 评论0 收藏0
Vue实战—路由轻松设置vue-router（3）

摘要：决定将组建渲染在哪，打开，添加配置路由打开文件夹下引入各个组件配置路由路径组件路由重定向我们在数组设定为。官方文档注意，当前激活导航设置方法固定属性值。所以使用保留组件状态，避免重新渲染购物车的数据丢失。上篇我们说了vue项目的目录设计，本篇我们来学习一下vue路由。路由的作用：在web端路由（route）就是URL到函数的映射，vue的router就像一个容器，分配，处理每一个...

timger 2019-08-23 18:08 评论0 收藏0
优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0