参考:https://segmentfault.com/q/1010000010829474
问题:列表页进详情页,第一次很慢,第二次就很快。
原因:我原本是使用组件懒加载,每次第一次切换路由的时候,都要去加载相应的组件的js文件,需要等文件加载完之后,路由才能切换过去。后面切换的话js都下载过了,所以切换就不卡了。
原router.js:
import Vue from ‘vue‘ import Router from ‘vue-router‘ Vue.use(Router) export default new Router({ routes: [{ path: ‘/‘, name: ‘Home‘, meta: { index: 0, keepAlive: true, title: ‘首页‘ }, component: resolve => require([‘../../../modules/Home‘], resolve) }, { path: ‘/detail‘, name: ‘Detail‘, meta: { index: 1, keepAlive: false, title: ‘详情页‘ }, component: resolve => require([‘../../../modules/Detail‘], resolve) //组件懒加载 }] })
改进后:
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Detail from ‘@/modules/Detail‘ // <== 修改 Vue.use(Router) export default new Router({ routes: [{ path: ‘/‘, name: ‘Home‘, meta: { index: 0, keepAlive: true, title: ‘首页‘ }, component: resolve => require([‘../../../modules/Home‘], resolve) }, { path: ‘/detail‘, name: ‘Detail‘, meta: { index: 1, keepAlive: false, title: ‘详情页‘ }, component: Detail // <== 修改 }] })
原文地址:https://www.cnblogs.com/linjiangxian/p/12213020.html
时间: 2024-10-10 08:07:46