vue——列表页进详情页,第一次很慢,第二次就很快问题解决方法
Posted linjiangxian
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue——列表页进详情页,第一次很慢,第二次就很快问题解决方法相关的知识,希望对你有一定的参考价值。
参考: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 // <== 修改 }] })
以上是关于vue——列表页进详情页,第一次很慢,第二次就很快问题解决方法的主要内容,如果未能解决你的问题,请参考以下文章