Vue3 setup语法糖 在使用router和vuex时,找不到this怎么办？

import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
export default {
  setup () {
    const store = useStore()
	const route = useRoute()
    const router = useRouter()
    return {
      // 在 computed 函数中访问 state
      count: computed(() => store.state.count),

      // 在 computed 函数中访问 getter
      double: computed(() => store.getters.double)

	  // 使用 mutation
      increment: () => store.commit('increment'),

      // 使用 action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}

例如，我们想拿到router路由的参数，该怎么办？？

//路由
import *as VueRouter from  'vue-router'
//引入组件


import ProductMerchantsRegister from '../pages/register/differentusers/ProductMerchantsRegister.vue'

const routes = [
    { path: '/productMerchantsRegister/:id', component: ProductMerchantsRegister },
]

const router = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

export default  router

用vant3搭建移动端界面代码，to是跳转的路由地址

  <van-button type="success" size="normal" to="/productMerchantsRegister/2" icon="shopping-cart-o">产品商家 </van-button>

我们用vant搭建了一个界面，我们希望单击返回时，在控制台打印id

可以那么写

<template>
  <div>
    <van-nav-bar
        safe-area-inset-top="true"
        title="产品商家注册"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
   </div> 
</template>

<script setup lang="ts">

import {useRoute} from "vue-router";
const route = useRoute()

const onClickLeft = () => {
  console.log(route.params);
};

}
</script>

控制台打印输出 2