Vue2路由坑：报错router.addRoute is not a function

已于 2023-02-03 19:33:27 修改
阅读量1.8k 收藏 1
点赞数 1
分类专栏： 踩坑日记 文章标签： javascript 开发语言 ecmascript
于 2022-11-15 21:25:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51290060/article/details/127874175
版权

 

 看了一下package.json，重新用cnpm安装了一个 vue-router@3   

在看一下打印的原型上就有了addRoute

lisa带你捕蟑螂
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【项目复盘-vue2.0】router.addRoutes 报错TypeError: routes.forEach is not a function
Weiqian_的博客
08-02 6365
router.addRoutes 报错TypeError: routes.forEach is not a function
详解Vue.js搭建路由报错 router.map is not a function
10-19
然而，有时候在搭建Vue Router时可能会遇到"router.map is not a function"这样的错误，这通常是由于版本不兼容或者使用方法不当导致的。 **错误分析：** 在Vue Router的早期版本（例如1.0.x）中，`router.map`是...
Vue3项目运行时报错误：TypeError：router.addRouters is not a function
小张同学的博客
09-17 3639
Vue3项目运行时报错误：TypeError：router.addRouters is not a function
addRouters()不生效
最新发布
heromps的博客
06-25 169
执行完addRouters()后，我查看了store里的routes，已经有将动态路由添加进去，但是菜单中还是没有显示。修改后的permission.js。ddRouters()不生效。
vue项目router报错：TypeError: _router.default.addRoute is not a function
weixin_52827704的博客
08-25 8844
控制台报错为： 在permission文件夹里面使用了：router.addRoute()的方法 原因：可能是因为安装依赖的时候用的npm 但是npm安装的包里面的route 原型里面没有addRoute的方法，所以报错 解决办法：把npm安装的依赖包删掉，用cnpm安装，打印route，原型里面就有这个方法了，如下图： 然后就成功啦 ...
关于使用router.addRoute中出现TypeError: router.addRoutes is not a function
weixin_51161895的博客
10-18 2599
关于使用router.addRoute中出现TypeError: router.addRoutes is not a function
报错:“TypeError: router.addRoute is not a function“
Machine_Monster的博客
09-14 2542
打开项目中的package.js 查看vue-router版本是否为。就可以再package.js 中看到当前的版本号。注意：重新安装后一定要重启服务！版本的vue-router。指令安装但是我这里出错。
vue项目router报错：TypeError _router.default.addRoute is not a function
m0_67393827的博客
03-09 2041
控制台报错为： 在permission文件夹里面使用了：router.addRoute()的方法 原因：可能是因为安装依赖的时候用的npm 但是npm安装的包里面的route 原型里面没有addRoute的方法，所以报错 解决办法：把npm安装的依赖包删掉，用cnpm安装，打印route，原型里面就有这个方法了，如下图： 然后就成功啦 ...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上下文没有正确指向Vue实例。下面我们将深入探讨这个问题及其解决方案。 ### 报错场景 在开发过程中，你可能在尝试将API获取的...
vuex 解决报错this.$store.commit is not a function的方法
10-17
当遇到 `this.$store.commit is not a function` 的错误，通常是因为在尝试调用 Vuex 中的 mutation 方法时，没有正确地配置或引用 store。 首先，我们需要确保正确安装了 Vuex。通过运行 `npm install vuex --save...
打包后出现 y.a.addRoute is not a function
热门推荐
小杨很困的博客
03-01 1万+
Ant Design Vue Pro框架打包后出现 y.a.addRoute is not a function
【前端笔记 】vue-router获取所有路由getRoutes()调用报错_router.default.getRoutes is not a function
向着光芒的女孩
06-20 9396
调用getRoutes方法报错_router.default.getRoutes is not a function
vue-router添加动态路由及无限刷新白屏和添加不生效问题
weixin_43993065的博客
03-01 8432
文章目录添加动态路由问题一：路由守卫死循环问题二：addRouters()不生效最终版，所有相关文件 添加动态路由 router/index.js 在router.js里定义asyncRoutes作为动态路由数组， import Vue from 'vue' import Router from 'vue-router' import Layout from '@/layout' Vue.use(Router) export const constantRoutes = [ { pa
引入vue-router.js搭建路由报错router.map is not a function 的问题
weixin_34279246的博客
11-17 326
为什么80%的码农都做不了架构师？>>> ...
vue2中使用vuerouter的坑 ：Object(...) is not a function
qq_47793359的博客
03-16 1638
vue2中使用vuerouter的坑 ：Object(...) is not a function
Vue编译项目时出现router.map is not a function
weixin_59519449的博客
08-28 763
（1）方法1：使用命令npm install vue-router@0.7.13兼容1.0版本vue。：2.0已经没有map这个方法了，只有1.0兼容该方法。（2）解决方法2：基于vue2.0，写对应的方法。
vue2+vue-router动态路由添加及路由刷新后消失的解决办法
weixin_44166849的博客
06-06 3650
vue-router动态路由添加及路由刷新后消失的解决办法
vue中的$router 和 $route的区别
liudachu的博客
09-29 515
vue2.0中的$router 和 $route的区别 最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和$route ，有些傻傻分不清，后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别 1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的
router.beforeEach((to, from, next) => { if (store.getters.getRouters == null) { // 获取菜单和路由 getMenusApi(params).then((res) => { if (res.data.length === 0) { window.location.href = process.env.VUE_APP_API_BASE_CONSOLE || '' } const { data } = res const menuNav = [] const childrenNav = [] // 后端数据, 根级树数组, 根级 PID listToTree(data, childrenNav, 0) menuNav.push(...childrenNav) const routers = generator(menuNav, null) routers.forEach((r) => { router.addRoute(r) }) router.addRoute(page404) store.commit('SET_ROUTERS', routers[0].children) // 请求带有 redirect 重定向时，登录自动重定向到该地址 const redirect = decodeURIComponent(from.query.redirect || to.path) if (to.path === redirect) { // set the replace: true so the navigation will not leave a history record next({ ...to, replace: true }) } else { // 跳转到目的路由 next({ path: redirect }) } }).catch((error) => { console.log(error,'error') if (error.data.code !== 200 || error.data.data.length === 0) { setTimeout(function () { window.location.href = process.env.VUE_APP_API_BASE_CONSOLE || '' }, 5) } }) // // 获取按钮权限 // getPermissionApi(params).then((res: any) => { // if (res.data.code !== 200) return ElMessage.error(res.data.message) // store.commit('SET_PERMISSION', res.data.data) // }) // // 获取数据权限 // getRolesApi(params).then((res: any) => { // if (res.data.code !== 200) return ElMessage.error(res.data.message) // store.commit('SET_ROLES', res.data.data) // }) // // 获取用户信息 // getUserInfoApi().then((res: any) => { // if (res.data.code !== 200) return ElMessage.error(res.data.message) // store.commit('SET_USERS', res.data.data) // }) } else { next() } })
06-12
这是一个 Vue 路由守卫的代码片段，用于在路由切换前进行一些操作。其中包含了以下主要逻辑： 1. 判断 store 中的路由信息是否为空，如果为空则向后端发起请求获取菜单和路由信息。 2. 通过 getMenusApi 函数向后端发起请求，获取菜单和路由信息。如果请求成功，则将获取到的菜单和路由信息转换为前端路由，并添加到 Vue Router 中。 3. 如果请求带有 redirect 重定向参数，则自动跳转到该地址。 4. 如果 store 中已经有路由信息，则直接跳转到目的路由。 5. 如果获取菜单和路由信息失败，则跳转到 404 页面或者登录页面。 注释中的代码是一些额外的逻辑，用于获取用户信息、按钮权限、数据权限等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值