本文是机遇
提纲:
 
  • 现有需求
  • 各个解决方案的优缺点
  • 相关的问题延伸
  • keep-alive使用详解
 
现有需求
 
每个项目中都存在许多列表数据展示页面,而且通常包含一些筛选条件以及分页。
 

并且,点击表格中的某一列需要进行路由跳转进入到详情/添加/编辑页面。
 
比较好的用户体验就是,从详情/添加/编辑页面返回之后希望列表页保留上次离开时的筛选条件和页码。但是正常情况下路由跳转之后实例已经被销毁。
 
可选的解决方案

1.保留状态数据:

     利用state存储状态,如筛选的品牌,时间范围,分页。在路由跳转到详情/添加/编辑的时候存储到state(vuex)中,如果跳转到其它路由就重置。
     缺点:每个列表的筛选条件有差别,还要在每个列表实例创建时读取状态(麻烦),但是也可以使用computed属性返回状态。
 

2.保留页面,保留实例:

      keep-alive,在路由跳转时并没有销毁实例。
keep-alive
使用原理:
  1.包裹动态组件时会缓存组件实例,而不是销毁  
  2.keep-alive内路由切换时会调用activated和deactivated这两个钩子
  
使用方法:
  •   套在router-view外面,受到影响的范围就是router-view 里面的路由跳转。
  
  • vue 2.1.0版本新增include和exclude属性以选择性的缓存哪些组件(感觉使用范围比较窄,有需要的自己看)
使用条件:
  • vue.js 1.0

  • vue.js 2.0

  • 非函数式组件
          什么是函数式组件?
                 render函数中创建模版内容(一般我们用不上,所以这个条件基本上没影响)
 
使用需要注意问题:
 
1.要用在transition里面(具体原因不清楚)

2.一旦根路由组件外面用到keep-alive,里面的所有路由跳转都会受到影响
  • 针对需要保留状态的列表页,在activated钩子里面执行想要更新的操作,比如更新列表数据:
     

     场景需求:
          mounted或者created钩子里面获取列表数据
          路由离开之后跳转回来,mounted或者created钩子不会被调用,但是我需要更新数据。
     解决方法:
          1.定义firstIn属性,初始化为true,表示是否第一次进入该路由。且在第一次执行activated钩子的时候将该值置为false。
          2.把mounted或者created钩子中的数据初始化操作转移到activated钩子中。
          
  • 针对不需要保留状态的其它页面,直接添加deactivated钩子并销毁实例就可以了。
     

3.发生菜单级别的跳转是否需要重新渲染
      
    注意每一个条件分支一定要执行next,否则实例被销毁了页面就不会被重新渲染。
 
其它问题:
 
1.非keep-alive包围的路由组件的activated和deactivated钩子是不会被触发的。举个例子:
 

假设路由跟节点有keep-alive包裹:

  • AC两个组件都可以被触发activated和deactivated钩子
  • BD不会被触发activated和deactivated钩子,因为BD组件不是路由组件
  • F也不会被触发,即使F是路由组件,但是,如果keep-alive有包裹E组件中的router-view,则F也可以被触发
总结一下
优点:
1.简单粗暴
2.相比于计算属性更脱离实际场景一些
缺点:
1.对于不需要缓存的路由都需要调用destroy 方法销毁。
 
 

vue.js+vue-router+webpack keep-alive用法的更多相关文章

  1. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  2. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  3. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  4. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  5. Vue.js随笔一(Webpack + Vue.js开发准备,含VNM、NPM、Node、Webpack等相关工具)

    想入门工具是必须的,这一章将向大家带来vue.js相关的程序安装步骤. ①首先你需要有一个NVM(一个非常好用的Node版本管理器): 1.NVM下载地址:https://github.com/cor ...

  6. 「Vue.js」Vue-Router + Webpack 路由懒加载实现

    一.前言 当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...

  7. 如何降低Vue.js项目中Webpack打包文件的大小?

    https://blog.csdn.net/maray/article/details/50988500?utm_source=blogxgwz0 import Blur from ‘vux/src/ ...

  8. (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象

    Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...

  9. Awesome Vue.js vue.js学习资源链接大全 中文

    https://blog.csdn.net/caijunfen/article/details/78216868

  10. RAP、Mock.js、Vue.js、Webpack

    最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...

随机推荐

  1. 20155209 2016-2017-2《Java程序设计》课程总结

    20155209 2016-2017-2<Java程序设计>课程总结 预备作业1 刚刚接触Markdown的写法,刚刚接触博客,简单了解娄老师的教学方式. 预备作业2 怎么将学习java像 ...

  2. 20155233 《Java程序设计》 实验三 敏捷开发与XP实践

    20155233 <Java程序设计> 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤与内容 1.在IDEA中使用工具(Code->Reformat ...

  3. Centos安装man功能

    CentOS接触很久了,但是一直作为服务器端使用.这次之所以安装man,是由于开始学习Nginx了. 言归正传,安装man,首先得下载包.由于我们天朝的原因,代码包几乎下不到的.首先你得FQ,再下载, ...

  4. 快读板子fread

    struct ios { inline char read(){ <<|; static char buf[IN_LEN],*s,*t; ,IN_LEN,stdin)),s==t?-:*s ...

  5. 【Unity3d】MenuItem修饰的方法无法触发的可能原因

    遇到了MenuItem修饰的方法无法触发的情况,顺利解决. 类放在Editor目录下,该类下其他方法被MenuItem修饰可以触发. 后来发现我修饰的方法和该类下另一个方法重名了. 改方法名,问题解决 ...

  6. NTP(Network Time Protocol)

    Linux NTP配置详解 (Network Time Protocol) http://www.ntp.org/ Meinberg NTP packages provide a GUI instal ...

  7. python--自定义模块

    python模块说明:类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才能完成(函数又可以在不 ...

  8. 图 -数据结构(C语言实现)

    读数据结构与算法分析 坑!待填! 若干定义 一个图G = (V , E)由顶点集V和边集E组成,每条边就是一个点对 如果点对是有序的,那么就叫做有向图 边可能还具有第三种成分,权值 无向图种从每个顶点 ...

  9. 深度学习论文笔记:Deep Residual Networks with Dynamically Weighted Wavelet Coefficients for Fault Diagnosis of Planetary Gearboxes

    这篇文章将深度学习算法应用于机械故障诊断,采用了“小波包分解+深度残差网络(ResNet)”的思路,将机械振动信号按照故障类型进行分类. 文章的核心创新点:复杂旋转机械系统的振动信号包含着很多不同频率 ...

  10. Halcon如何保存仿射变换矩阵

    这里我们通过序列化来实现的,如下图,写到硬盘的HomMat2D_1内容和从硬盘里HomMat2D_2读出的内容一致,源代码在图片下方. Halcon源代码: hom_mat2d_identity (H ...