vue动态路由异步加载import组件，加载不到module的问题

25 年 01 月 18日 星期 六 (已编辑)
作者：未知用户
日常生活
这篇文章最后修改于 2025年 01月 18日 19时10分 部分内容可能已不适用 如有疑问请联系作者.

vue动态添加路由使用addRoute()方法加载路由组件，页面报错

路由信息由后端给出，那么前端需要动态加载路由，同时component的路径也是后端给出，但是动态加载该路径会报错

问题复现

服务器端代码

js 复制代码 
const express = require('express')
const app = express()

app.get('/routes',(req, res) => {
    res.setHeader('Access-Control-Allow-Origin','*')
    res.send({
       code: 200,
       data:{
           routes:[
               {
                   path: '/',
                   name: 'home',
                   component: '/views/home.vue'
               },{
                   path:'/home',
                   component: '/views/home.vue'
               },{
                   path: '/detaile',
                   component: '/views/detaile.vue',
                   alias:  '/as'
               }
           ]
       }
    })
})

app.listen(1423,() => {
    console.log('当前端口已经开启')
})

前端代码

vue 复制代码 
/* 动态添加路由 */
fetch('http://localhost:1423/routes').then(res => res.json()).then(son => {
  console.log('son',son);
  generateRoutes(son.data.routes).map(ir => {
    let comurl = `${ir.component}`
    console.log(comurl)
    // let str = '@/views/home/home.vue'
    let component = () => import(`@/views${ir.component}`)
    router.addRoute('/',{component,path:ir.path})
    // router.addRoute('/',{component:()=> import('@'+ ir.component +'.vue'),path:'/detaile'})
  })
  console.log('当前路由表数据为',routes);
})

结果报错

image.png

解决方法

刚开始在网络上面找到的方法差不多都是将import方法 改为require方法来引入

但是使用写死的静态路径是可以引入.....

原因应该是在webpack，webpack 编译es6 动态引入 import() 时不能传入变量，因为webpack的现在的实现方式不能实现完全动态

js 复制代码 
// 假如path = '@/views/user'
const com = () => import(path) // 这样会报错哦
 
const com2 = () = > import('@/views/user') // 这样写死的字符串就可以

试了上面的方法还是无效,琢磨半天之后,想了一下如果多写一层文件的路径会怎么样？

于是，改了一下服务端的输出将前缀views去除

js 复制代码 
const express = require('express')
const app = express()

app.get('/routes',(req, res) => {
    res.setHeader('Access-Control-Allow-Origin','*')
    res.send({
       code: 200,
       data:{
           routes:[
               {
                   path: '/',
                   name: 'home',
                   component: '/home.vue'
               },{
                   path:'/home',
                   component: '/home.vue'
               },{
                   path: '/detaile',
                   component: '/detaile.vue',
                   alias:  '/as'
               }
           ]
       }
    })
})

app.listen(1423,() => {
    console.log('当前端口已经开启')
})

此时动态添加的路由显示正常
Alt text

::: tip
修改文件的对比
:::

js 复制代码 
//  修改前
routes:[
        {
            path: '/',
            name: 'home',
            component: '/views/home.vue'
        },{
            path:'/home',
            component: '/views/home.vue'
        },{
            path: '/detaile',
            component: '/views/detaile.vue',
            alias:  '/as'
        }
    ]
//  修改后
 routes:[
        {
            path: '/',
            name: 'home',
            component: '/home.vue'
        },{
            path:'/home',
            component: '/home.vue'
        },{
            path: '/detaile',
            component: '/detaile.vue',
            alias:  '/as'
        }
    ]

也可以去看一下这篇文章vue动态路由异步加载import组件报错原因

目录
暂无目录信息

文章标题：vue动态路由异步加载import组件，加载不到module的问题

文章作者：未知用户

文章链接：[复制]

最后修改时间：2024年 03月 06日 00时10分

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，您可以自由地在任何媒体以任何形式复制和分发作品，也可以修改和创作，但是分发衍生作品时必须采用相同的许可协议。 本文采用CC BY-NC-SA 4.0进行许可。

Copyright © 2023--2025

豫ICP备2022014268号-1

我们历经沧桑，这样错过了一生最好的时光，错过了便是永远