【Vue】vue3 hooks 中使用 useRouter 报错 push undefined 报错解决方法

已于 2024-07-02 17:48:41 修改
阅读量1k 收藏 1
点赞数 6
分类专栏： Vue.js 文章标签： vue.js javascript 前端
于 2024-07-02 17:48:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IAIPython/article/details/140132839
版权

报错原因：

在 Vue 3 中，如果你在自定义 Hooks 中尝试使用 useRouter 并遇到错误，特别是没有 push 方法的问题，这通常是因为 useRouter 和 useRoute 需要在 Vue 组件的 setup 函数内部使用，而不是在自定义 Hooks 外部直接使用。这是因为这些 Hooks 是基于 Composition API 的设计，依赖于 Vue 组件的上下文环境。

解决步骤：

  1. 确保在 setup 函数内部使用 useRouter 和 useRoute: 这是 Vue 3 Composition API 的基本规则，所有基于 setup 的 Hooks 都应该在该函数内部使用。

  2. 在自定义 Hooks 中传递路由实例: 如果你的自定义 Hook 需要访问路由信息或方法，你可以考虑将路由实例作为参数传递给自定义 Hook。

  3. 使用全局路由实例: 另一个解决方案是在自定义 Hooks 中直接使用全局的路由实例，而不是通过 useRouter 获取。这种方法允许你在任何地方访问路由信息，但请注意这可能违反了 Composition API 的最佳实践。

示例代码：

假设你有一个自定义 Hook 需要使用路由信息来执行某些操作，你可以这样修改它：


                

                
                
        

    

  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
vue3.x路由跳转useRouter执行后undefined问题 setup

				
			

			

				

					听雨少年的博客
				

				

					02-12
					
					3867
					
				

			

		

		

			
				
useRouter执行一定要放在setup方法内的顶部或者其他位置，不能放在下面setup的函数里面执行(方法内定义的其他函数)，否则作用域改变useRouter执行是undefined。
import { useRouter } from 'vue-router';
	// 1. 获取 router
    const router = useRouter();
    // 2. 调用router 的方法
    function toPage(){
      router.push("/about"

			
		

	



                

            
              



	

		

			

				
					
Vue3 自定义Hooks完全指南

				
			

			

				

					m0_37778704的博客
				

				

					01-18
					
					2622
					
				

			

		

		

			
				
在Vue3发布后,Composition API作为一个重要的特性,彻底改变了我们组织Vue组件代码的方式。其中,自定义Hooks的概念源自React,但Vue3对其进行了重新设计和优化,使其更加符合Vue的开发理念。本文将深入探讨Vue3中的自定义Hooks,帮助你掌握这个强大的代码复用工具。Hooks是一种特殊的函数,它可以让你在函数组件中使用状态和其他Vue特性。以"use"作为函数名称前缀返回一个包含响应式数据或方法的对象,可以使用其他Hooks,遵循组合式函数的设计模式代码组织。

			
		

	



              


  
              

                


	

		

			

				
					
vue3-在自定义hooks使用useRouter 报错问题

				
			

			

				

					Bruce__taotao的博客
				

				

					11-29
					
					1536
					
				

			

		

		

			
				
记录在vue3项目中，hook使用useRouter 报错问题提示：以下是本篇文章正文内容，下面案例可供参考。

			
		

	





	

		

			

				
					
vue3 获取当前路由信息失败问题

					
最新发布

				
			

			

				

					weixin_44801790的博客
				

				

					03-22
					
					332
					
				

			

		

		

			
				
vue3刷新浏览器时获取当前路由信息失败：undefined

			
		

	



		

			
		



	

		

			

				
					
vue3在自定义hooks中使用userRoute结果为undefined,如何在自定义hooks中使用userRoute

				
			

			

				

					Lucky_girl_wan的博客
				

				

					09-09
					
					7900
					
				

			

		

		

			
				
vue3.0中在setup中使用路由


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


export default defineComponent({
     const route = useRoute()
     const router = useRouter()

     console.log(route.query.id)
     router.push(

			
		

	





	

		

			

				
					
vue3.x中useRouter()执行后返回值是undefined问题

				
			

			

				

					weixin_43422861的博客
				

				

					12-06
					
					1万+
					
				

			

		

		

			
				
useRouter

			
		

	





	

		

			

				
					
Vue3 useRoute 和 useRouter 返回 undefined

				
			

			

				

					qq_46199553的博客
				

				

					09-19
					
					4290
					
				

			

		

		

			
				
Vue3 useRoute 和 useRouter 返回 undefined

			
		

	





	

		

			

				
					
Vue3中在Vuex中使用路由跳转页面报错-Cannot read properties of undefined (reading ‘push‘)

				
			

			

				

					JackieDYH的博客
				

				

					09-09
					
					264
					
				

			

		

		

			
				
useRoute, useRouter必须写到setup中,强行在函数中使用这两会报undefined,导致无法获取路由数据和路由方法。

			
		

	





	

		

			

				
					
vue-router的hooks用法详解

				
			

			

				

					10-15
				

			

		

		

			
				
在Vue3之前，获取路由参数的方式是在Vue组件中通过this.$route.params获取，使用编程式导航时，则通过this.$router.push()方法。而在Vue3中，由于Composition API的使用，this的引用发生了改变，我们需要通过...

			
		

	





	

		

			

				
					
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）

				
			

			

				

					aDiaoYa_的博客
				

				

					01-25
					
					3405
					
				

			

		

		

			
				
结合了很多项目和文章，总结一篇项目构建的笔记。
温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~

			
		

	





	

		

			

				
					
vue3 尚硅谷vue3入门到实战

				
			

			

				

					wk964269669的博客
				

				

					07-03
					
					1145
					
				

			

		

		

			
				
vue3 基础知识

			
		

	





	

		

			

				
					
Vue3学习- setup 使用 useRoute函数返回为 undefined，语法糖与非语法糖的错误、正确的写法情况

				
			

			

				

					灬Manong 博客
				

				

					05-26
					
					1262
					
				

			

		

		

			
				
我使用了vue3的setup语法糖。如果是非vue3 setup语法糖，useRouter和useRoute函数不能在setup里面的函数体内部执行，要放在顶部或者其他位置，不然作用域改变，执行后的router/route是 undefined。

			
		

	





	

		

			

				
					
关于 vue3 在自定义hook中出现的报错问题 （更新中）

				
			

			

				

					小文同学的博客
				

				

					05-19
					
					779
					
				

			

		

		

			
				
关于 vue3 在自定义hooks中出现的报错问题

			
		

	





	

		

			

				
					
最新vue-router的hooks用法你会吗？本文详解

				
			

			

				

					QQ2352108083的博客
				

				

					06-09
					
					999
					
				

			

		

		

			
				
虽然Vue 3还没有正式发布，但是热爱新技术的我早已按捺不住自己的内心，开始尝试在小项目中使用它了。
1.根据这篇《今日凌晨Vue3 beta版震撼发布，竟然公开支持脚手架项目！》我搭建了一个Vue 3的脚手架项目，用这种方式搭建的脚手架项目不仅仅只有vue是新版的，就连vue-router、vuex都是最新的。
2.光理论是不够的。在此赠送2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，想学的可进裙 519293536 免费获取，小白勿进哦！
给大家截一下pack

			
		

	





	

		

			

				
					
解决使用vue3进行路由跳转,报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘push‘)

				
			

			

				

					gurenchang的博客
				

				

					01-24
					
					2690
					
				

			

		

		

			
				
解决使用vue3进行路由跳转,报错：Uncaught TypeError: Cannot read properties of undefined (reading 'push')

			
		

	





	

		

			

				
					
vue3.0路由跳转useRouter执行后undefined问题-踩坑笔记

					
热门推荐

				
			

			

				

					Leslie_hxd的博客
				

				

					10-14
					
					2万+
					
				

			

		

		

			
				
方法一
注意：useRouter执行一定要放在setup方法内的顶部，不能放在下面toPage函数里面执行，否则是undefined
import { useRouter } from 'vue-router';
export default {
  setup() {
    // 第一步将useRouter函数执行放在顶部
    const router = useRouter();
    // 第二步在方法里面调用router 
    function toPage(){
      rout.

			
		

	





	

		

			

				
					
想求助下vueRouter引入后报undefined的问题

				
			

			

				

					2301_78234743的博客
				

				

					05-23
					
					1088
					
				

			

		

		

			
				
食品科学与工程专业，二本，岭南师范学院，找不到研发工作，剩下的就是检验工作工资低人家还不一定要我，没。如题，上班闲着没啥干，刷会牛客被mt逮住了，直接喷我，嫌我天天下班到点就走，以后不能牛客摸鱼了也不能。哥们儿毕答可视分析，下面老师没一个懂可视分析，直接说我论文框架有问题，不知道写的什么，要求我按照他们。通过内推拿到了一个实习面试的机会经过几天的准备，主要复盘了一下之前做过的项目面试了25分钟，两个面试。决赛圈了，家人们，一开始就奔着稳定的日子找工作，现在广州gwy和佛山电网二选一，感觉是各有好处。

			
		

	





	

		

			

				
					
使用$router.push()方法进行传值时显示undefined

				
			

			

				

					m0_73956769的博客
				

				

					12-07
					
					842
					
				

			

		

		

			
				
使用$router.push()方法进行传值时显示undefined

			
		

	





	

		

			

				
					
vue3封装面包屑导航

				
			

			

				

					01-13
				

			

		

		

			
				
### 封装 Vue3 中的面包屑导航组件

#### 使用 Composition API 和 TypeScript 实现面包屑组件

为了创建一个高效的面包屑导航组件，在 `mounted` 钩子函数中调用 `generateBreadcrumb` 方法，可以在组件初始化时生成面包屑导航的功能[^1]。

定义面包屑项接口：

```typescript
interface BreadcrumbItem {
  path: string;
  name?: string | undefined;
}
```

编写 `useBreadcrumb` 自定义 Hook 函数来处理逻辑部分：

```typescript
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

export function useBreadcrumb() {
  const route = useRoute();
  const router = useRouter();

  let breadcrumbs = ref<BreadcrumbItem[]>([]);

  const generateBreadcrumb = () => {
    // 清除之前的路径数据
    breadcrumbs.value.length = 0;

    // 获取匹配到的路由记录数组
    const matchedRoutes = route.matched.filter(item => item.meta && item.meta.title);
    
    for (let i = 0; i < matchedRoutes.length; i++) {
      const routeRecord = matchedRoutes[i];
      
      // 如果不是首页，则添加分隔符链接
      if(i !== 0){
        breadcrumbs.value.push({
          path: &#39;&#39;,
          name: &#39;/&#39;
        });
      }

      // 添加当前页面对应的面包屑条目
      breadcrumbs.value.push({
        path: routeRecord.path,
        name: routeRecord.meta?.title as string
      });
    }
  };

  // 当前路由变化时重新计算面包屑列表
  watch(() => route.fullPath, generateBreadcrumb);

  return {
    breadcrumbs,
    generateBreadcrumb
  };
}
```

在模板文件里渲染这些信息：

```html
<template>
  <div class="breadcrumb">
    <el-breadcrumb separator="/">
      <!-- 循环遍历 breadcrumb 数组 -->
      <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from &#39;vue&#39;;
import { useBreadcrumb } from &#39;./hooks/useBreadcrumb&#39;; 

export default defineComponent({
  setup() {
    const { breadcrumbs, generateBreadcrumb } = useBreadcrumb();

    onMounted(generateBreadcrumb); // 页面加载完成后执行一次
    
    return {
      breadcrumbs
    };
  },
});
</script>
```

此代码片段展示了如何利用 Vue Router 提供的信息构建动态更新的面包屑导航栏。通过监听路由的变化并相应调整显示的内容，确保用户始终能够看到最新的位置指示器[^2]。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值