相信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
}
}
web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)
注:这个多用于单页下的几个子模块使用,一般切换比较多使用下面的路由
使用路由(这个就是配置路由的问题了,不作赘述)
2.动态生成tab
一般UI框架给我们的tab切换都像是上面的那种,需要自己写入几个tab页之类的配置。但是我们如果想要通过点击左边的目录来生成一个tab页并且可以随时关闭呢(如下图)?