路由及路由懒加载

为什么需要懒加载？

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

理解了一下就是按需加载

路由分为几个部分
第一个部分登录页
第二部分登录成功后跳转的部分，common（公共的单页）
然后就是根据你的菜单结构，自定义的路由

路由懒加载

路由懒加载的方法，component: resolve => require(['../common/common'],resolve),

import Vue from 'vue'
import Router from 'vue-router'
// import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/login'
    },
    {
      path:'/study',
      component: resolve => require(['../common/common'],resolve),
      children:[
        {
          path:'/',
          name: 'Study',
          component: resolve => require(['../components/study/study'],resolve)
        },
        {
          path: '/study/css',
          name: 'Css',
          component: resolve => require(['../components/study/css'],resolve)
        },
      
      ]
    },
    {
      path: '/mobile',
      component: resolve => require(['../common/common'],resolve),
      children: [
        {
          path:'/',
          name: 'mobile',
          component: resolve => require(['../components/mobile/firstExperince.vue'],resolve)
        },
      ]
    },
    {
      path:'/login',
      name:'Login',
      component: resolve=> require(['../components/Login'],resolve)
    }
  ]
})

浏览器兼容问题

上述的懒加载其实有一个浏览器兼容性的问题，就是我在360，qq这些浏览器下面路由渲染的内容是不显示的，
有两种方法可以解决
第一种再index.html里面引入polyfill.min.js

<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>

第二种，先安装，在配置
安装

npm install babel-polyfill --save

在webpack.base.conf.js中配置

 entry: {

    app: ['./node_modules/babel-polyfill/dist/polyfill.js','./src/main.js']
  },

打包报错问题解决

image.png

路由及路由懒加载

为什么需要懒加载？

路由懒加载

浏览器兼容问题

打包报错问题解决

推荐阅读更多精彩内容