vue3点击事件触发路由跳转案例代码

1.

import { useRoute, useRouter } from "vue-router";

//获取路由器对象
let $router = useRouter();

// 获取当前路由对象
let $route= useRoute();

//左侧菜单点击事件的回调
const changeActive = (path: string) => {
  //跳转到对应二级路由
  $router.push({ path, query: { hoscode: $route.query.hoscode } });
};

2.

import { useRoute, useRouter } from "vue-router";

//获取路由器对象
let $router = useRouter();

// 获取当前路由对象
let $route= useRoute();

//点击医院卡片的时候跳转到医院详情页面
// const goDetail = () => {
//   $router.push({ path: "/hospital" });
// };

//接受父组件传递过来的props->即为已有的医院的数据
let props = defineProps(["hospitalInfo"]);

const goDetail = () => {
  $router.push({ path: "/hospital/register",query:{hoscode:props.hospitalInfo.hoscode}});
};

3.

import {useRouter} from "vue-router";

// 获取路由器对象
let $router = useRouter();

// 点击某一的推荐项
const goDetail =()=>{
  // 点击推荐项目进入医院详情页，将来需要携带query参数（医院的编码）
  $router.push({path:"/hospital/register",query:{hoscode:item.hoscode}});
}