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——列表页进详情页,第一次很慢,第二次就很快问题解决方法的主要内容,如果未能解决你的问题,请参考以下文章

mysql在第一次查询的时候很慢,第二次查询就比较快的原因?

vue列表页面进入详情页面后返回白屏

vue中keep-alive的作用

vue移动端webview视频轻应用

Vue 实现前进刷新,后退不刷新的效果

Vue 实现前进刷新,后退不刷新的效果