前言
相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。
1.如何切换
使用动态组件,相信大家都能看懂(部分代码省略)
//通过点击就可以实现两个组件来回切换
切换view
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页并且可以随时关闭呢(如下图)?
只需要给路由一个点击事件,把你的路由地址保存到一个列表,渲染成另一个平铺的tab目录即可
假设你的布局是这样,左边的目录,上边的tab,有字的是页面