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 相关文章推荐
JS拖动技术 关于setCapture使用
Dec 09 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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文件锁函数flock()详细介绍
2014/11/18 PHP
PHP自定义错误用法示例
2016/09/28 PHP
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
Three.js快速入门教程
2016/09/09 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
深入理解移动前端开发之viewport
2018/10/19 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python模块搜索路径代码详解
2018/01/29 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
精细化工应届生求职信
2013/11/17 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
问卷调查计划书
2014/01/10 职场文书
大学应届生的自我评价
2014/03/06 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
公司捐款倡议书
2014/05/14 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
先进人物事迹材料
2014/12/29 职场文书
大学生志愿者心得体会
2016/01/15 职场文书