38 lines
951 B
Vue
38 lines
951 B
Vue
<template>
|
||
<div class="app-container">
|
||
<el-tabs v-model="activeName" class="res-el-tab" @tab-click="handleClick">
|
||
<el-tab-pane label="竞彩足球" name="soccer"><soccer /></el-tab-pane>
|
||
<el-tab-pane label="竞彩篮球" name="basketball"><basketball /></el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="VideoScript">
|
||
import { ref, watch } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import soccer from './components/soccer.vue'
|
||
import basketball from './components/basketball.vue'
|
||
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
// 从URL参数获取activeName，如果没有则默认为'soccer'
|
||
const activeName = ref(route.query.tab || 'soccer')
|
||
|
||
// 监听activeName变化，更新URL参数
|
||
watch(activeName, (newVal) => {
|
||
router.replace({
|
||
query: {
|
||
...route.query,
|
||
tab: newVal
|
||
}
|
||
})
|
||
})
|
||
|
||
const handleClick = (tab, event) => {
|
||
console.log('点击标签页:', tab.props.name)
|
||
}
|
||
|
||
</script>
|