记vue3中在hooks中使用useRoute， useRouter使用方法调用时获取不到对象的问题

最新推荐文章于 2025-04-27 11:21:09 发布

落魄小前端

最新推荐文章于 2025-04-27 11:21:09 发布

阅读量1.6k

点赞数 9

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/a6588433/article/details/135817027

文章讲述了在JavaScript文件中尝试导入并调用VueRouter的useRoute和useRouter时遇到的问题，即在非setup函数中无法直接获取这些对象。解决方案是将它们作为props传递给setup函数中的组件，以在组件生命周期中正确使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { useRouter, useRoute, } from 'vue-router'

const fn = () => {
    const route = useRoute()
    const router = useRouter()

    console.log(route, router)

}

这个在js文件里面引入并且调用的时候，会获取不到这两个对象看了vue-router的文档，发现是需要在setup的函数下使用才可以调用这两个对象。

解决思路：如何hooks不能直接获取到route的话可以在vue的setup函数调用的时候传入

const fn = ({ route, router }) = {
    console.log(route, router),

    // 使用的方法
}