vue 动态获取路由在对组件进行处理是报错，导致无法进入页面

最新推荐文章于 2024-05-30 17:10:07 发布
最新推荐文章于 2024-05-30 17:10:07 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue-router vue vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14936009/article/details/90716073
版权

vue 动态获取路由在对组件进行处理是报错，导致无法进入页面

代码如下

route.cpmponent 打印如下

 

问题原因是

当异步执行的时候，router.component已经成了一个函数，不是一个字符串了

解决方案是

const component = route.component
route.component = resolve => require(['@/view'+ component], resolve)

qq_14936009
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 动态路由
01-20
1. **新建路由组件 (User.vue)** 在 `User.vue` 文件中，我们创建了一个名为 "User" 的组件，用于展示用户信息。其中 `{{$route.params.userId}}` 是 Vue Router 提供的数据绑定，它将从当前激活的路由中获取 `...
详解Vue.js搭建路由报错 router.map is not a function
10-19
在实际项目开发中，我们常常会用到Vue Router来处理应用的路由管理，以便实现页面间的导航和状态管理。然而，有时候在搭建Vue Router时可能会遇到"router.map is not a function"这样的错误，这通常是由于版本不兼容...
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue异步加载组件（报错）
YLXB2的博客
04-19 1861
异步加载组件： 报错：Syntax Error: Unexpected token (10:25) 8 | el: ‘#app’, 9 | components: { 10 | ‘example’: () => import(’./components/example’) | ^ 11 | } 1...
vue3加载动态路由出现的问题解决
最新发布
A15029296293的博客
05-30 337
寻找了很多方法，最后明白了应该是npm run build 打包后，代码按照上面的import导入就无法找到组件路径，所以需要换一种引入方法。打印modules可以看到返回了views文件夹下的所有路径，通过遍历这个路径和后端拿到的数据路径，过滤出最后的动态路由。最近遇到了动态加载路由的问题，在开发环境下动态路由正常，打包后部署到服务器后，动态路由无法访问，一直报错。写一个for循环遍历方法，遍历后台返回的数据，并且遍历modules获取到对应的path并返回。
vue异步数据 报错_浅谈vue异步数据影响页面渲染
weixin_39866741的博客
02-05 612
今天遇到一个问题，要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中，而在页面渲染时session中还没有user，页面直接报错。因此我希望能在所有请求都得到后再去做页面的渲染。1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏，避免渲染2.写计数器，每1ms进行一次查询，如果session中已经有user，删...
Vue中关于props的异步传值,父调子方法报错的原因。
qq_32149823的博客
03-11 2214
###Vue中关于props是异步传值，父组件调用子组件方法的同时，子组件拿不到值的问题
vue项目vue-router的使用
weixin_44258964的博客
05-07 427
vue项目路由的配置，使用，快速掌握学习使用路由
Vue3 进行 router.push 异步加载报错 TypeError: Cannot read properties of undefined (reading ‘apply‘)
lucker_y的博客
08-16 1591
Vue3 进行 router.push 异步加载报错 TypeError: Cannot read properties of undefined (reading ‘apply‘)
解决vue的router组件component在import时不能使用变量问题
10-15
在Vue.js应用中，Vue Router是一个强大的路由管理库，它允许我们定义动态路由并按需加载组件，以优化应用程序的性能。然而，在某些情况下，我们可能想要根据条件或变量来动态导入组件。本文将深入探讨如何解决Vue ...
vue router路由嵌套不显示问题的解决方法
08-30
`<router-view>`是Vue Router用来插入对应路由组件的地方。确保在`ParentComponent`的模板中存在`<router-view>`，以便Vue Router可以将`ChildComponent`插入其中。 2. **路由路径的正确性**：在配置子路由时，路径...
关于vue 动态引入（异步加载import和require）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度
热门推荐
yorcentroll的博客
01-26 2万+
关于vue 动态引入（异步加载）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度
解决路由懒加载报错 core-js/fn/promise in ./src/store/index.js
qq_63209510的博客
10-10 286
在使用 component: resolve => require(['@/components/Home'],resolve)会引起vscode自动添加import { resolve } from 'core-js/fn/promise'。. 把import { resolve } from 'core-js/fn/promise'给注释掉就好了，如图所示。
【Vue】Router路由无法跳转问题整理
Sheldon74的博客
09-08 1万+
Vue Router路由无效或异常等问题整理
关于Vue实现动态路由component找不到组件的问题(Error: Cannot find module ‘@/views/User‘)
提笔忘字的帝国
03-22 1万+
Error: Cannot find module '@/views/User';store sync?5d98:2 Uncaught (in promise) Error: Cannot find module '@/views/User'
Vue router 路由中path和component的作用
weixin_45608986的博客
08-10 1万+
component是获取跳转页面的地址 方式一： 和引入组件一样 先把要跳转的页面引入router js文件中再进行调用 方式二： 直接在component获取要跳转页面的位置 component:()=>import(' 跳转页面地址') path是路由参数，当路径匹配到当前路由参数时，就会跳转component所对应的页面组件 ...
vue的router组件component在import时不能使用变量
牧竹子
08-29 2万+
webpack 编译es6 动态引入 import() 时不能传入变量，例如dir =’path/to/my/file.js’ ； import(dir) , 而要传入字符串 import(‘path/to/my/file.js’)，这是因为webpack的现在的实现方式不能实现完全动态。 但一定要用变量的时候，可以通过字符串模板来提供部分信息给webpack；例如import(./path...
component: resolve => require(['@/view/index.vue'], resolve) 与component: index区别
余_小凡 的博客
08-16 1万+
require: 运行时调用，理论上可以运用在代码的任何地方， import：编译时调用，必须放在文件开头 懒加载：component: resolve => require(['@/view/index.vue'], resolve) 用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js 非懒...
Vue + Element UI 实现权限管理系统 前端篇（十）：动态加载菜单
朝雨忆轻尘
09-02 4594
动态加载菜单 之前我们的导航树都是写死在页面里的，而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模拟数据，然后动态生成我们的导航菜单。 接口模块化 我们向来讲究模块化，之前接口都集中在，interface.js，我们现在把它改名为 api.js，并把里边原来登录、用户、菜单的相关接口都转移到我们新建的接口模块文件中。 模块化之后...
vue动态使用import路由懒加载报错解决方法
07-24
2. 文件命名错误：Vue路由的懒加载是根据文件的命名约定来识别动态组件的，所以要确保动态组件的文件名符合约定。一般来说，文件名应该以大驼峰或者小驼峰命名，并且应该以`.vue`为后缀。 3. 缺少babel插件：在使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值