动态路由中,有一步需将后端传回的component 的字符串模式,改为我们前端路由需要的component模式,报错Cannot find module

动态路由加载实践
本文介绍了一种在前端应用中实现动态路由的方法。针对从后端获取的组件路径字符串,通过两种方式转换为前端路由可识别的组件加载形式:一种使用import动态加载,但会触发错误;另一种采用require结合resolve函数成功实现按需加载。

动态路由中,有一步需将后端传回的component 的字符串模式,改为我们前端路由需要的component模式

一、import写法 报错

动态路由 Cannot find module '@/views/Home.vue'

function loadPageByRoutes(str) { // 传入的str为 '@/views/Home.vue'  这种格式 
   return () => import(`${str}`);// 要报错 
}

二、改为require写法,并返回一个resolve ,可行

function loadPageByRoutes(str) { // views文件夹下的Home组件,传入的格式为 'Home'
  return function (resolve) {
    require([`@/views/${str}.vue`], resolve);
  };
}
动态路由中,如果后端返回的component是一个字符串前端可以通过以下步骤将这个字符串转换为实际的组件: 1. **创建一个组件映射表**:将字符串与实际的组件进行映射。 2. **根据字符串查找组件**:使用映射表将字符串转换为实际的组件。 3. **动态加载组件**:使用动态导入或其他动态加载技术将组件加载到应用中。 以下是一个简单的示例: ```javascript // 假设我们有一个组件映射表 const componentMap = { 'home': () => import('./components/Home.vue'), 'about': () => import('./components/About.vue'), 'contact': () => import('./components/Contact.vue') }; // 假设后端返回的字符串是 'home', 'about', 'contact' 等 function getComponentByName(name) { return componentMap[name]; } // 在路由配置中使用 const routes = [ { path: '/:componentName', component: null, // 初始值 beforeEnter: async (to, from, next) => { const componentName = to.params.componentName; const component = getComponentByName(componentName); if (component) { const loadedComponent = await component(); to.matched[0].components.default = loadedComponent.default; next(); } else { next({ path: '/404' }); // 处理未找到的组件 } } } ]; ``` 在这个示例中,我们首先创建了一个组件映射表 `componentMap`,将字符串与实际的组件进行映射。然后,我们定义了一个 `getComponentByName` 函数,根据字符串查找对应的组件。 在路由配置中,我们使用 `beforeEnter` 导航守卫来动态加载组件。当路由匹配时,我们根据参数 `componentName` 查找对应的组件,并使用 `import` 动态导入组件。最后,我们将加载的组件设置为路由的组件,并调用 `next()` 继续导航。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值