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

来源:12-6 页面布局及展示逻辑开发(2)

慕容6332229

2021-05-06

老师,返回函数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中定义的函数体中就不行,移出来才可。否则报如上错误,但我不明白为何。
前面我也问了类似问题,始终不得正解奥!

写回答

1回答

Dell

2021-05-07

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

0
1
慕容6332229
谢谢老师,知道了!回头我细看下这个文档。
2021-05-10
共1条回复

Vue3入门与项目实战 掌握完整知识体系

明星讲师DELL亲授,全方位知识点+高匹配度项目,入门到深度掌握

3394 学习 · 1468 问题

查看课程