vue实现tab切换页面,vue tab切换页面刷新
相信标签页切换大家都不陌生，在后台管理系统中也会用到。不知道的可以看看浏览器顶部的tab开关，大概就是这个效果。
:
目录
1.如何切换2。动态生成tab3。缓存组件3.1保持活动3.2使用缓存组件的3.3生命周期功能。
1.如何切换
使用动态组件，相信大家都能看懂(部分代码省略)。
//您可以通过单击来来回切换这两个组件。
Button @click=changeView 切换视图/按钮
组件：is= current view /组件
从“@/views/pageA”导入pageA；
从“@/views/pageB”导入pageB；
计算值：{
currentView(){
返回this . view list[this . index]；
}
},
方法：{
changeView() {
this.index=( this.index)%2
}
}
注意：这主要由单个页面下的几个子模块使用。一般来说，以下路由用于切换。
路由(这是配置路由的问题，不赘述)
2.动态生成tab
一般UI框架给我们的tab切换就像上面的，需要我们自己写几个tab页等配置。但是如果我们想通过点击左边的目录生成一个标签页，并且可以随时关闭(如下图)呢？
只需给路由一个单击事件，将路由地址保存到一个列表中，并将其呈现到另一个平铺的选项卡目录中。
假设你的布局是这样的，目录在左边，标签在上面，页面有文字。
菜单
菜单项v-for=(item，index)in menuList :key= index @ click= addtotablelist(item . path)
router-link:to= item . path“{ item . name } }/router-link
菜单项
/菜单
模板
class= left //菜单代码如上。
div class=右
选项卡列表
tab-item v-for=(item，index) in tabList :key=index
router-link:to= item . path“{ item . name } }/router-link
icon class= delete @ click= delete tab /icon
/选项卡-项目
/tab-列表
页面视图
路由器视图/路由器视图//这是页面显示。
/页面视图
/div
/模板
上面的代码不是实际的代码，只是提供了一个大概的思路。至于如何添加ToTabList和deleteTab，就是一个简单的数组方法的推送和拼接操作。为了好看，我们可能还需要tab的一些主动样式，这里就不演示了。
3.缓存组件
仅仅切换标签是远远不够的。毕竟想要标签页，就得来回切换操作。我们需要将他的操作进度保存在不同的选项卡中，比如填写的表单信息或者查询的数据列表。
那么我们如何缓存组件呢？
仅使用vue中的保活组件。
3.1 keep-alive
Keep-alive是Vue的内置组件，可以在组件切换过程中保持内存中的状态，防止DOM被重复渲染。
当keep-alive包装动态组件时，它缓存不活动的组件实例，而不是销毁它们。
Keep-alive类似于transition，但它是一个抽象组件。不会呈现在DOM树中(真实或者虚拟)，也不存在于父组件链中。比如，你永远不会在这里面找到keep-alive。$parent。
注意：keep-alive不能用于缓存固定组件，这将是无效的。
//无效
点火电极
我的组件/我的组件
/保持活力
3.2 使用
3.2.1在旧版本vue 2.1之前使用
点火电极
路由器视图v-if= $ route . meta . keepalive /路由器视图
/保持活力
路由器-查看v-if=！$ route . meta . keepalive /router-view
需要在路由信息中设置路由器的元信息。
导出默认新路由器({
路线：[
{
路径：“/a”，
姓名：甲，
成分：A，
元：{
KeepAlive: false //不需要缓存
}
},
{
路径：“/b”，
姓名： B ，
成分：B，
元：{
keep:true//需要缓存
}
}
]
})
3.2.2相对较新且简单的用法
直接缓存所有组件/路线
点火电极
路由器-视图/
/保持活力
点火电极
组件：is= view /组件
/保持活力
使用include处理需要缓存的组件/路线。
Include可以以多种方式使用。它可以是一个数组，用标点符号分隔字符串，也可以是常规的。使用regular时，需要使用v-bind进行绑定。
Keep-alive include= [a ， b ]//缓存名为A，b的组件。
Keep-alive include=a，b//缓存名为A，b的组件
keep-alive:include=/store//cache名称以store开头的组件
路由器视图///可以是路由器视图
component:is= view /component//也可以是动态组件。
/保持活力
使用exclude排除不需要缓存的路由。
与include相反，exclude中的组件不会被缓存。用法差不多，就不赘述了。
3.2.3一个相当奇怪的情况
页面跳转模式有A-C和B-C两种，但是从A到C不需要缓存，从B到C需要缓存。这时候就需要结合老版本的用法来使用路由的钩子。
导出默认值{
data() {
return { }；
},
方法：{}，
beforeRouteLeave(收件人、发件人、下一个){
to . meta . keepalive=false；//不缓存下一页
next()；
}
};
导出默认值{
data() {
return { }；
},
方法：{}，
beforeRouteLeave(收件人、发件人、下一个){
//设置下一条路由的元
to . meta . keepalive=true；//下一页缓存
next()；
}
};
3.3 缓存组件的生命周期函数
第一次打开缓存时，和普通组件一样，需要执行创建、挂载等功能。
但是，当它们被重新激活和停用时，将不会执行这些通用组件的生命周期功能，但会执行两个独特的生命周期功能。
激活的
当缓存的组件被重新激活时，将调用这个函数。
无效的
当缓存组件被停用时，将调用此函数。
以上是vue Tab切换和缓存页面处理的几种方式的细节。关于vue标签页切换和缓存页面处理的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。