返回函数handleBackClick中，为何不能写router的初始定义，而要写在函数体外

Question

老师，返回函数handleBackClick中为何不能写const router = useRouter()，而要写在函数体外，才能执行。否则报错。
见如下代码：

 // 下面的写法报错
 setup () {
   const route = useRoute()
   const shopId = route.params.id
   const { shopName, calculations, productList } = useCommonCartEffect(shopId)
   const handleBackClick = () => {
     const router = useRouter() //写在此处报错，不行。这行要移到外面才可
     router.back()
   }

   return { shopName, calculations, productList, handleBackClick }
 }

正确写法如下：

 // 正确写法
 setup () {
   const route = useRoute()
   const shopId = route.params.id
   const { shopName, calculations, productList } = useCommonCartEffect(shopId)
   const router = useRouter() //写在此处就可，正常执行。写handleBackClick在中则不行
   const handleBackClick = () => {
     router.back()
   }

   return { shopName, calculations, productList, handleBackClick }
 }

不明白这是为何。报错信息截图如下

其实写代码时，我经常会遇到此类问题，比如还有const router = useRouter()，以及 const store = useStore()，等等，如果直接写在setup中定义的函数体中就不行，移出来才可。否则报如上错误，但我不明白为何。
前面我也问了类似问题，始终不得正解奥！

Answer 1

Dell 2021-05-07 21:15:44

useRoute, useRouter必须写到setup中,详见vue-next-router官方文档

• 提问者 慕容6332229 #1

  谢谢老师，知道了！回头我细看下这个文档。