vue Tab切换以及缓存页面处理的几种方式


Posted in Javascript onNovember 05, 2019

前言

相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。

1.如何切换

使用动态组件,相信大家都能看懂(部分代码省略)

//通过点击就可以实现两个组件来回切换
<button @click="changeView">切换view</button>
<component :is="currentView"></component>

import pageA from "@/views/pageA";
import pageB from "@/views/pageB";

computed: {
 currentView(){
   return this.viewList[this.index];
 }
},
 methods: {
 changeView() {
  this.index=(++this.index)%2
 }
}
注:这个多用于单页下的几个子模块使用,一般切换比较多使用下面的路由

使用路由(这个就是配置路由的问题了,不作赘述)2.动态生成tab

一般UI框架给我们的tab切换都像是上面的那种,需要自己写入几个tab页之类的配置。但是我们如果想要通过点击左边的目录来生成一个tab页并且可以随时关闭呢(如下图)?

vue Tab切换以及缓存页面处理的几种方式

只需要给路由一个点击事件,把你的路由地址保存到一个列表,渲染成另一个平铺的tab目录即可

假设你的布局是这样,左边的目录,上边的tab,有字的是页面

vue Tab切换以及缓存页面处理的几种方式

<menu>
 <menu-item v-for="(item,index) in menuList" :key="index" @click="addToTabList(item.path)">
  <router-link :to="item.path">{{item.name}}</router-link>
 <menu-item>
</menu>
<template>
 <menu class="left"/>//menu代码部分如上
 <div class="right">
  <tab-list>
   <tab-item v-for="(item,index) in tabList" :key="index">
    <router-link :to="item.path">{{item.name}}</router-link>
    <icon class="delete" @click="deleteTab"></icon>
   </tab-item>
  </tab-list>
  <page-view>
   <router-view></router-view>//这里是页面展示
  </page-view>
 </div>
</template>
以上代码并非实际代码,只提供一个大概的思路。至于addToTabListdeleteTab怎么做就是数组方法的简单pushsplice操作了。为了效果好看,我们可能还需要一些tabactive样式,这里不作演示。

3.缓存组件

仅仅是做tab切换,远远是不够的,毕竟大家想要tab页就是要来回切换操作,我们需要保存他在不同tab里操作的进度,比如说填写的表单信息,或者已经查询好的数据列表等。
那么我们要怎么缓存组件呢?
只需要用到vue中的keep-alive组件

3.1 keep-alive

  • <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
  • <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
  • <keep-alive><transition>相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive
注:不能使用keep-alive来缓存固定组件,会无效
//无效
<keep-alive>
 <my-component></my-component>
</keep-alive>

3.2 使用

3.2.1 老版本vue 2.1之前的使用

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

需要在路由信息里面设置router的元信息meta

export default new Router({
 routes: [
  {
   path: '/a',
   name: 'A',
   component: A,
   meta: {
    keepAlive: false // 不需要缓存
   }
  },
  {
   path: '/b',
   name: 'B',
   component: B,
   meta: {
    keepAlive: true // 需要被缓存
   }
  }
 ]
})

3.2.2 比较新而且简单的用法

直接缓存所有组件/路由

<keep-alive>
  <router-view/>
</keep-alive>

<keep-alive>
  <component :is="view"></component>
</keep-alive>

使用include来处理需要缓存的组件/路由

include有几种用法,可以是数组,字符串用标点隔开,也可以是正则,使用正则的时候需要使用v-bind来绑定。
<keep-alive include="['a','b']">//缓存name为a,b的组件
<keep-alive include ="a,b">//缓存name为a,b的组件
<keep-alive :include="/^store/">//缓存name以store开头的组件
  <router-view/>//可以为router-view
  <component :is="view"></component>//也可以是动态组件
</keep-alive>

使用exclude来排除不需要缓存的路由

include正好相反,在exclude里的组件不会被缓存。用法类似,不作赘述

3.2.3 一种比较奇怪的情况

当页面跳转方式有A->CB->C两种,但是我们从A到C的时候,不需要缓存,从B到C的时候需要缓存。这时候就要用到路由的钩子结合老版本用法来实现了。

export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  to.meta.keepAlive = false; // 让下一页不缓存
  next();
 }
};
export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
  to.meta.keepAlive = true; //下一页缓存
  next();
 }
};

3.3 缓存组件的生命周期函数

缓存组件第一次打开的时候,和普通组件一样,也需要执行created, mounted等函数。
但是在被再次激活被停用时,这几个普通组件的生命周期函数都不会执行,会执行两个比较独特的生命周期函数。

activated
这个会在缓存的组件重新激活时调用

deactivated
这个会在缓存的组件停用时调用

结语

这个是很基础的知识,放在笔记里很久了,不过之前记得有点乱,今天拿出来抖一下尘~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
js中延迟加载和预加载的具体使用
Jan 14 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 #Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 #Javascript
vue 实现路由跳转时更改页面title
Nov 05 #Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 #Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 #Javascript
node.js域名解析实现方法详解
Nov 05 #Javascript
node.js文件操作系统实例详解
Nov 05 #Javascript
You might like
PHP静态新闻列表自动生成代码
2007/06/14 PHP
php上传文件的增强函数
2010/07/21 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
javascript Excel操作知识点
2009/04/24 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
PyTorch学习笔记之回归实战
2018/05/28 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python实现图片中文字分割效果
2019/07/22 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
商务英语专业自荐信
2013/10/14 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
企业年会主持词
2014/03/27 职场文书
市场营销毕业求职信
2014/08/07 职场文书
运动会稿件100字
2014/09/24 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers