vue-router路由懒加载
2024-08-26 05:09:14
正常配置
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/pages/login'
import Capture from '@/components/pages/capture'
import List from '@/components/pages/list'
import CaptureFail from '@/components/pages/capture-fail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/capture',
name: 'Capture',
component: Capture
},
{
path: '/list',
name: 'List',
component: List
},
{
path: '/capture-fail',
name: 'CaptureFail',
component: CaptureFail
}
]
})
懒加载配置
import Vue from 'vue'
import Router from 'vue-router'
// import Login from '@/components/pages/login'
// import Capture from '@/components/pages/capture'
// import List from '@/components/pages/list'
// import CaptureFail from '@/components/pages/capture-fail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: resolve => require(['@/components/pages/login'], resolve) // Login
},
{
path: '/capture',
name: 'Capture',
component: resolve => require(['@/components/pages/capture'], resolve) // Capture
},
{
path: '/list',
name: 'List',
component: resolve => require(['@/components/pages/list'], resolve) // List
},
{
path: '/capture-fail',
name: 'CaptureFail',
component: resolve => require(['@/components/pages/capture-fail'], resolve) // CaptureFail
}
]
})
说明
npm run build后会新增路由数量相匹配的.js文件，在切到相应路由时动态加载这个文件。
参考
最新文章
- 分享自己写的JS版日期格式化和解析工具类，绝对好用！
- centos下安装java8
- 解决Window Azure: Failed to start Development Storage: the SQL Server instance ‘localhost\SQLExpress’ could not be found.
- 暴雪HASH算法（转）
- (一)SecureCRT连接虚拟机linux
- webBrowser1执行函数
- Go Deeper（2010成都现场赛题）（2-sat）
- [itint5]根据前序后序遍历统计二叉树
- Java基础知识强化92：日期工具类的编写和测试案例
- 获取SQL段的执行时间
- DBA避坑宝典：Oracle运维中的那些事儿
- Raft详解分析
- 《Java编程思想》读书笔记
- 在VMWare上安装Arch Linux
- cocos2dx深度检测与Zorder
- 关于nginx配置虚拟主机
- hdu 2036:改革春风吹满地（叉积求凸多边形面积）
- Teechart使用记录
- LOJ2542 PKUWC2018随机游走（概率期望+容斥原理）
- EF + MySql 错误：配置错误 无法识别的元素“providers”