vue3+ts路由跳转query传参

传参使用     router    

收参使用     vue-router     

// 原页面带参
<script lang="ts">
import router from "@/router"; // 引用router

export default defineComponent({

  setup() {
    // 跳转
    const handleToInfoPage = (scope: any) => {
      router.push({
          path: '/info',
          query: {
              id: scope.data.row.id
          }
      })
    }
    return {
        handleToInfoPage
    }
 }
</script>

 

// 新页面接收参数
<script lang="ts">
import { useRoute }  from "vue-router";  // 引用vue-router 

export default defineComponent({
var data = reactive({
    paramId: ''
})
  setup() {
     // 接收url里的参数
      const route = useRoute();
      console.log(route.query.id,"参数");
      data.paramId = route.query.id

    return {
        ...toRefs(data),
    }
 }
</script>