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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
js使用formData实现批量上传
Mar 27 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 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去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
php微信开发自定义菜单
2016/08/27 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
Javascript验证方法大全
2015/09/21 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python递归实现快速排序
2018/08/18 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Django model select的多种用法详解
2019/07/16 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python实现飞行棋游戏
2020/02/05 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
自我鉴定怎么写
2013/12/05 职场文书
迟到检讨书800字
2014/01/13 职场文书
如何写求职信
2014/05/24 职场文书
运动会演讲稿200字
2014/08/25 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
如何做好员工培训计划?
2019/07/09 职场文书