vue3 常见的路由传参&无刷新修改当前路由url带参

最新推荐文章于 2024-05-28 22:58:45 发布

小前端

最新推荐文章于 2024-05-28 22:58:45 发布

阅读量1.2k

点赞数 7

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_45041493/article/details/135766504

版权

无刷新修改当前路由url带参

//tabs切换部分
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane  v-for="(item,index) in tagList"  :label="item.title"  :name="item.name" :key="index"></el-tab-pane>
 </el-tabs>
 <script setup>
 import {ref} from 'vue'
 import {userRouter} from 'vue-router'
const router =userRouter()
// tag的数组
let tagList = ref([
    {name:'0',title:"基本信息"},
    {name:'1',title:"医疗记录"},
    {name:'2',title:"院外监测"},
    {name:'3',title:"管理方案"},
    {name:'4',title:"咨询记录"},
    {name:'5',title:"专病档案"}
])
// 标签的id
let activeName = ref(route.query.seeState)
// tab标签切换
const handleClick=(e)=>{
    activeName.value=e.props.name
    //路由跳转
    router.push({
        path: '/subhealth/subhealth',
        query: {
          userId: route.query.userId,
          seeState:e.props.name
        }
      })
}
 </script>