问题描述:

  在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新。

  1. <transition name="fade" mode="out-in">
  2. <keep-alive>
  3. <router-view></router-view>
  4. </keep-alive>
  5. </transition>

有几种解决方式:

  1.在keep-alive中直接添加 include,cachedViews(Array类型:包含vue文件的组件name都将被缓存起来);反之exclude则是不包含;

  注意:所有.vue组件文件都必须附上name属性!!!建议用vuex管理cachedViews

  1. <keep-alive :include="cachedViews">
  2. <router-view></router-view>
  3. </keep-alive>

  2.监测$router的变化;

  1. watch: {
  2. // 如果路由有变化,会再次执行该方法
  3. "$route": "fetchDate"
  4. }

  但是会在页面离开时再次执行fetchDate,并不是我们需要的,所以可以在to和from上添加执行逻辑,但也是十分的麻烦

  1. //$router是只读状态,所以赋值操作会失效
  2. watch: {
  3. $route (to, from) {
  4. iflist.indexOf(from.path) > -1){ //自行添加逻辑,list为你不想有缓存的路径
  5.         this.getData()
  6. }
  7.   }
  8. }

  3.在添加keep-alive后会增加两个生命周期mounted>activated、离开时执行deactivated,路由的进入和切换回相应的触发activated和deactivated,这样就可以在每次入路由执行更细致的操作了

  1. //如果是服务端渲染就算了
  2. activated() {
  3. //只刷新数据,不改变整体的缓存
  4. this.fetchDate();
  5. }

  4.还有更简单粗暴的

  1. //我就笑笑不说话
    <div>
  2. <keep-alive>
  3. <router-view v-if="$route.meta.keepAlive"></router-view>
  4. </keep-alive>
  5. <router-view v-if="!$route.meta.keepAlive"></router-view>
  6. </div>

  5.还有种情况,在不同路由应用了相同的vue组件

  1. {path:'aaa',component:Mompage,name:'mom'},
  2. {path:'bbb',component:Mompage,name:'momPlus'}

  默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子,需要手动的watch:$router(又回到上面的步骤),或者在router-view上加上唯一值。

  1. //随便抄一段代码过来
  2. <router-view :key="key"></router-view>
  3. computed: {
  4. key() {
  5. return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
  6. }
  7. }

  有错误的,请指出

vue路由在keep-alive下的刷新问题的更多相关文章

  1. 用vue写一个仿app下拉刷新的组件

    如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...

  2. vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

    一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...

  3. 实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)

    做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js / ...

  4. VUE 路由参数改变重新刷新数据

    VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...

  5. vue.js移动端app实战4:上拉加载以及下拉刷新

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...

  6. 详解vue移动端 下拉刷新

    看完这篇文章,相信大伙也一样可以,做出一个自己的刷新,加载的组件 说这个功能之前,大家要先了解一下,要怎么触发滚动条事件. 一定要注意,所有滚动事件都必须要满足这个条件,横向滚动条也一样, 只要满足子 ...

  7. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  8. vue-scroller实现vue单页面的上拉加载和下拉刷新问题

    在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...

  9. vue+better-scroll 下拉刷新,上拉加载更多

    better-scroll 来做下拉刷新和 上拉加载 特别方便.  安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...

  10. vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

    vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...

随机推荐

  1. FastDFS整合Nginx的模块:fastdfs-nginx-module报错:fdfs_define.h:15:27: 致命错误:common_define.h:没有那个文件或目录

    错误提示: /usr/include/fastdfs/fdfs_define.h:15:27: 致命错误:common_define.h:没有那个文件或目录 [解决办法] 1.编辑fastdfs-ng ...

  2. linux命令详解——sort

    [原文链接]:http://www.cnblogs.com/51linux/archive/2012/05/23/2515299.html 1 sort的工作原理 sort将文件的每一行作为一个单位, ...

  3. session共享原理以及PHP 实现多网站共享用户SESSION 数据解决方案

    参考自: http://www.cnblogs.com/qulinke/articles/6003049.html https://segmentfault.com/q/101000000578847 ...

  4. google的CacheBuilder缓存

    适用性: 计算或检索一个值的代价很高,并且对同样的输入需要不止一次获取值的时候,就应当考虑使用缓存. 常用用法: LoadingCache<Key, Graph> graphs = Cac ...

  5. POJ - 2774 Long Long Message (后缀数组/后缀自动机模板题)

    后缀数组: #include<cstdio> #include<algorithm> #include<cstring> #include<vector> ...

  6. BZOJ4641 基因改造[KMP]

    这道题以前好像模拟的时候做过,当时不会做,于是用hash水过去了.. 正解是KMP,还是用当前字符与上一次相同字符位置的距离表示数组,于是数值相等时就代表相似.第一次出现用INF代替. 然后要匹配有多 ...

  7. 微信小程序没找到构建npm或者没找到node_modules目录以及如何在小程序中引入vant weapp组件

    微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init ...

  8. 对React的研究-------------引用

    DOM 的全称是 Document Object Model (文档对象模型) 响应式 UI const ThinkerWithHat = ({ hat }) => (  <div> ...

  9. win10 1903 更改文字大小

    标题栏 - 菜单 - 消息框 - 调色板标题11- 图标 - 工具提示 - Caption 标题 的 宽/高 - ; 14的宽高 - 菜单 的 宽/高 - ; 的宽高 -; 设置 注册表 HKEY_C ...

  10. JS中生成随机数

    1.Math 对象方法: Math.ceil(); //向上取整. Math.floor(); //向下取整. Math.round(); //四舍五入. Math.random(); //0.0 ~ ...