router 跳转页面时，跳转出错

const goToProduct = (productId) => {
  router.push({ name: 'Product', params: { productId:productId } }); 
};

    {
      path: '/product/:productId',
      name: 'Product',
      component: Product
    },

<script>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const productId = route.params.productId;
console.log(productId);
</script>

调了很久，搜了很多资料

结果最后找到答案，跳转界面没有加 setup 语法糖

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const productId = route.params.productId;
console.log(productId);
</script>

添加后 bug 解决