返回函数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回答
-
useRoute, useRouter必须写到setup中,详见vue-next-router官方文档
012021-05-10
相似问题