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

vue 动态获取路由在对组件进行处理是报错,导致无法进入页面
function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串,转换为组件对象
const accessedRouters = asyncRouterMap.filter(route => {

if (route.component) {
  if (route.component === ‘Layout‘) {//Layout组件特殊处理
    route.component = Layout
  } else {
  console.log(‘@/view‘+ route.component)
    route.component = () => import(‘@/view‘+ route.component) //这样不行,报错信息如下
     //route.component = () => import(‘@/view/company/basicInfo‘) //这样是可以进入到这样页面的
  }
}
if (route.children && route.children.length) {
  route.children = filterAsyncRouter(route.children)
}
return true

})
return accessedRouters
}

报错信息

解决办法:

找到问题了,是因为当异步执行的时候,router.component已经成了一个函数,不是一个字符串了,改为下面这种写法就可以了
const component = route.component
route.component = resolve => require([‘@/view‘+ component], resolve)

原文地址:https://www.cnblogs.com/mark5/p/12101906.html

时间: 2024-10-05 05:02:13

vue 动态获取路由在对组件进行处理是报错,导致无法进入页面的相关文章

vue中使用v-if判断数组长度是出现length报错

在vue中使用v-if判断数组的长度时出现报错 <el-collapse-item :key="index" v-if="data.childrens.length > 0" :title="data.fname" :name="data.fname"> <el-row> <el-col :md="24" :lg="12" :xl="8&qu

vue 学1(cp) Eslint 配置及规则说明(报错)

https://blog.csdn.net/violetjack0808/article/details/72620859 https://blog.csdn.net/hsl0530hsl/article/details/78594973 Vue.js学习系列五 -- 从VUE-CLI来聊聊ESLint 原创 2017年05月22日 06:40:41 标签: vue-cli / eslint 7092 最近在用vue-cli写项目的时候,经常和ESLint打交道,也算是不打不相识啦.下面总结一下

vue项目更换目录后执行npm run dev 就报错(新手进)

在我们搭建好一个VUE项目的环境后,觉得这个项目存放的位置不好,想移动一下,但是移动后我们发现执行npm run dev就会报下面的错误: 明明只是移动了一下位置,就报错,实在是太恶心了. 但是只要我们细心看一下错误:,然后去node_modules文件夹下去找这个包,会发现这个包是这样的 我们发现:这只是一个快捷方式,根本就不是我们下载的module 如果只有一个是这样,我们直接使用npm install semver就OK了,但是很遗憾,这样的东西不是一个而是几百个: 无语...总不能一个个

vue动态添加路由addRoutes之不能将动态路由存入缓存

在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

Vue入门之旅:一报错 Unknown ... make sure to provide the &quot;name&quot; option及error compiling template

报错一: Unknown custom element: <custom-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option 代码: html <custom-select v-bind:list="list2"></custom-select> js

iview国际化问题(iview官方提供的兼容[email&#160;protected]+使用组件报错)

问题描述: 按照iview官方的说法配置i18n发现在使用组件的时候会报错. 兼容 [email protected]+的配置如下图 报错如下图 解决方法: 经过参考element-ui的国际化配置终于解决问题. 解决方法如下图 原文地址:https://www.cnblogs.com/guojikun/p/9146084.html

vue创建项目报错显示vue 和 vue-template版本不同

既然是版本不一致,那么只需要把vue与vue-template-compiler的版本更新为一致的就行了 第一种办法: 更新vue-template-compiler到与vue同版本 把vue-template-compiler卸载(cnpm uninstall vue-template-compiler), 再重新安装一个与vue版本一致的vue-template-compiler(cnpm install [email protected]报错中提示的vue-template-compile

Vue动态组件&amp;异步组件

在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题. 如上是vue官网的例子,你会注意到如果你选择一篇文章,切换到Archive标签,然后切回Posts, 是不会继续展示你之前选择的文章的.因为你每次切换新标签的时

Vue动态加载异步组件

背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好