提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue——列表页进详情页，第一次很慢，第二次就很快问题及解决方法

Vue列表方法 解决 第一次 第二次 问题 详情页
2023-09-27 14:29:10 时间

参考：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  // <== 修改
    }]
})

注意：直接注册组件，会在首页加载时就加载其内容包括其内部引入的子组件，打包到index.css文件中。

相关文章