vue路由懒加载办法

前言

像vue这种(spy)单页面应用,如果没有使用到懒加载,webpack打包的文件过大,造成进入首页时,加载的资源过多,时间过长,即使做了loading也不利于用户体验,而运用懒加载可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载事件,简单来说就是进入首页不用一次加载过多资源造成时间过长.

方法如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  // 设置聊天列表页面为首页
  {
    path: '/',
    redirect: {
      name: 'session'
    }
  },
  // 最近消息列表(会话)
  {
    path: '/session',
    name: 'session',
    component (resolve) {//懒加载方式
      require(['../pages/Session'], resolve)
    }
  },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章