【前端笔记 】vue-router获取所有路由getRoutes()调用报错_router.default.getRoutes is not a function

已于 2022-06-24 16:47:30 修改
阅读量9.3k 收藏 4
点赞数 9
分类专栏： 前端笔记 vue 文章标签： 前端 vue.js javascript
于 2022-06-20 15:21:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ann295258232/article/details/125373319
版权

想查看所有的路由，看官方文档说是可以通过getRoutes()方法获取

在这里插入图片描述

然而自己在代码里使用却报错：Uncaught (in promise) TypeError: _router.default.getRoutes is not a function

在这里插入图片描述

后来看了一下vue-router更新记录，原来getRoutes()方法是在3.5.0才新增的，自己维护的项目vue-router版本是 “vue-router”: “3.0.2”

在这里插入图片描述

特此记录此探索过程，已提醒自己。

向着光芒的女孩
关注
  • 9
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
报错:“TypeError: router.addRoute is not a function“
Machine_Monster的博客
09-14 2532
打开项目中的package.js 查看vue-router版本是否为。就可以再package.js 中看到当前的版本号。注意：重新安装后一定要重启服务！版本的vue-router。指令安装但是我这里出错。
vue-element-admin用户权限管理，根据用户权限获取动态路由，刷新页面需重新登录bug处理
weixin_43965143的博客
03-28 3948
vue-element-admin用户角色权限，刷新跳转登录页面 问题的主要原因是用户角色登录的时候就获取到了，起初没有另外的接口再去获取用户信息，后来新增一个通过用户id再去获取用户角色，但跟原框架通过token获取用户角色不同，就又冒出刷新页面却跳到登录页面去了的问题 这里通过一个流程图展示src/promission.js的router.beforeEach的运行逻辑(必须要2这条线才能获取...
详解Vue.js搭建路由报错 router.map is not a function
10-19
主要介绍了详解Vue.js搭建路由报错 router.map is not a function，非常具有实用价值，需要的朋友可以参考下
Vue2路由坑：报错router.addRoute is not a function
weixin_51290060的博客
11-15 1796
报错router.addRoute is not a function
vue中的$router 和 $route的区别
liudachu的博客
09-29 514
vue2.0中的$router 和 $route的区别 最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和$route ，有些傻傻分不清，后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别 1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的
vue - VueRouter 动态路由的实现
weixin_44624120的博客
10-23 3166
VueRouter定义路由参数定义方法请求路由数据引入模块最最最主要的还是全局路由导航守卫beforeEach 全局前置守卫router 模块VueRoter 版本问题router.addRoutes 已废弃：使用 router.addRoute() 代替。router.addRoute 添加一条新路由规则。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会新版的 router 与3.0版本的 的matcher 多了一些方法所遇到的问题 最近在写一个新项目，前端使用动态路由实现页面权限
VueJS项目报错解决：router.map is not a function - 方法大全
热门推荐
草巾冒小子的博客
11-09 3万+
问题描述： vue报错 router.map is not a function 原因和解决办法（2种以上）： . 在vue的高版本中已经弃用了低版本的.map()方法。 可以通过设置向下兼容，或者新的方法，来实现路由页面的激活功能。 . 具体情况，我们通过下面的代码，对比一下不同版本的代码区别，如下： 一、基于vue2.0，写对应的方法。 Method 1 使用命令npm instal...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上下文没有正确指向Vue实例。下面我们将深入探讨这个问题及其解决方案。 ### 报错场景 在开发过程中，你可能在尝试将API获取的...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
在这个"vue3.x+vite+ts+vue-router@4.x 路由使用demo"中，我们可以学习到以下关键知识点： 1. **Vue3 Composition API**：Vue3 引入了Composition API，允许开发者将逻辑组件化，提高了代码的复用性和组织性。在...
vue3动态路由
weixin_54682264的博客
04-27 608
学习记录关于前端动态路由与后端的交互 /**动态路由根据后端返回的菜单动态的显示菜单**// const initRouter = async () => { //登陆后拿到后端给我们返回的菜单信息(params:from(用户名和密码)) const result await axios.get('http://localhost:9999/login',{params:form}) //去循环这个数组，通过router.addRoute去接收path和name以及组件的地址 r
Vue3项目运行时报错误：TypeError：router.addRouters is not a function
小张同学的博客
09-17 3622
Vue3项目运行时报错误：TypeError：router.addRouters is not a function
vue2路由和vue组件动态控制
weixin_54691198的博客
09-12 1661
vue2由router利用js动态控制路由和vue组件动态控制
vue3.0+Ant Design Vue后台crm管理系统admin
03-06
使用了Vue3.0全家桶、ant-design-vue2.0，实践vue3.0的新特性以及玩法，vue3.0的Composition API相比于vue2.0的Options API 灵活很多，让我们可以灵活地组合组件逻辑,目前后端admin大部分还是vue2.6;但是未来被vue3取代是大势所趋,望早上岸!
【vue-router源码】五、router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes源码分析
MAXLZ的博客
06-07 4621
【vue-router源码】系列文章将带你从0开始了解的具体实现。该篇文章将分析router.addRoute的实现。
关于使用router.addRoute中出现TypeError: router.addRoutes is not a function
weixin_51161895的博客
10-18 2584
关于使用router.addRoute中出现TypeError: router.addRoutes is not a function
vue项目router报错：TypeError: _router.default.addRoute is not a function
weixin_52827704的博客
08-25 8834
控制台报错为： 在permission文件夹里面使用了：router.addRoute()的方法 原因：可能是因为安装依赖的时候用的npm 但是npm安装的包里面的route 原型里面没有addRoute的方法，所以报错 解决办法：把npm安装的依赖包删掉，用cnpm安装，打印route，原型里面就有这个方法了，如下图： 然后就成功啦 ...
vue-router总结
weixin_47450807的博客
02-20 4481
一、前言 本篇博客主要是总结一下vue-router，将总结一下vue-router中的常用的api。 二、认识前端路由 路由其实是网络工程中的一个术语，在架构一个网络时，非常重要的两个设别是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器,事实上，路由器主要维护的是一个映射表，映射表会决定数据的流向。 路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段，前后端分离阶段，单页面复应用(SPA)阶段。 一
安装了vue-router后报错vue_router__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
最新发布
06-02
这个问题可能是由于Vue Router的版本不兼容导致的。在Vue Router 3.x版本中，`VueRouter`被导出为一个对象，而不是一个构造函数。如果您使用的是Vue Router 3.x版本，请按照以下方式引入和使用它： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) const routes = [ // your routes here ] const router = new VueRouter({ routes }) new Vue({ router, render: h => h(App), }).$mount('#app') ``` 如果您使用的是Vue Router 2.x版本，则可以按照以下方式引入和使用它： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) const router = new VueRouter({ routes: [ // your routes here ] }) new Vue({ router, render: h => h(App), }).$mount('#app') ``` 如果您的Vue Router版本已经正确，仍然出现这个问题，您可以尝试删除`node_modules`文件夹和`package-lock.json`文件，重新安装依赖： ``` rm -rf node_modules rm package-lock.json npm install ``` 希望这些步骤可以帮助您解决问题。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值