tabs切换#

1、html

html 复制代码
          <el-tabs v-model="tabValue" @tab-change="handleTabClick">
            <el-tab-pane label="集群" name="1"></el-tab-pane>
            <el-tab-pane label="节点" name="2"></el-tab-pane>
          </el-tabs>

2、js

javascript 复制代码
  import { useRoute, useRouter } from 'vue-router'

  const route = useRoute()
  const router = useRouter()  
  
  const tabValue = computed(() => {
    return route.query.type || '1';
  });

  const handleTabClick = (item) =>{
    if (item === tabValue.value) return;
    router.push({ query: {... route.query, type: item } });
  }
相关推荐
jktantan34 分钟前
(二)Vue 3 的 attrs 不是响应式:el-form 扩展属性同步的三种方案
前端·javascript·vue.js·element-plus
echome8881 小时前
JavaScript async/await 错误处理:别让 Promise 静默失败
开发语言·前端·javascript·promise
#麻辣小龙虾#2 小时前
网页布局css中flex+margin的组合布局技巧
开发语言·前端·javascript
Hello.Reader3 小时前
Three.js / Cesium 卡顿怎么办?把三维渲染搬到 GPU 服务器
服务器·开发语言·javascript
chi11303 小时前
【无标题】
前端·javascript·python
萝卜兔0084 小时前
PIKACHU_UnsafeFileUpload
javascript·php
Highcharts.js4 小时前
Highcharts 集成到 React 或 Vue 项目中时,如何高效地使用 TypeScript技巧?
vue.js·人工智能·react.js·typescript·前端框架·highcharts
Java后端的Ai之路13 小时前
CAS并发控制-从CPU指令到企业级乐观锁
vue.js·人工智能·python·cas·乐观锁
程序员大阳16 小时前
副队长JavaScript教程(50)-DOM:网页开发的起点
javascript·dom·es·节点·概念·document·关系
香芋芋圆20 小时前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器