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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
jQuery中库的引用方法
Jan 06 jQuery
javascrpt密码强度校验函数详解
Mar 18 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
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 创建标签云函数代码
2010/05/26 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
php数组删除元素示例
2014/03/21 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
canvas时钟效果
2017/02/16 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
护士专业推荐信
2013/11/02 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
工程承包协议书范本
2014/09/29 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS