logo头像

arthas.com.cn

vue-router中import不能使用变量解决办法

该文章被围观

本文于373天之前发表,文中内容可能已经过时。

vue-router中为了实现懒加载组件,需要用这样的写法:

1
2
3
4
5
{
path: '/login',
name: 'login',
component: () => import('@/page/login/login.vue')
}

但有时候需求会导致需要通过变量指定vue文件路径,从而实现动态加载,例如:

1
2
3
4
5
6
7
let path = '@/page/login/login.vue'

{
path: '/login',
name: 'login',
component: () => import(path)
}

但是webpack在编译时import()不能使用变量,需要用静态字符串才能正确打包。上面的写法会因找不到文件而报错。

报错

但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack;例如:

1
2
3
let path = '/login/login.vue'

component: () => import(`@/page${path}`)

这样编译时会编译所有./path下的模块,但运行时确定path的值才会加载,从而实现懒加载。

原文

上一篇