Vue3 setup语法糖 在使用router和vuex时,找不到this怎么办？_在setup语法糖里面没有this,应该怎么使用this.$route.params

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