zoukankan      html  css  js  c++  java
  • vue__之路由懒加载

    1. 基础写法, 没有懒加载
    2. import Vue from 'vue'
      import Router from 'vue-router'
      import Comment from '@/assets/view/comment.vue'
      Vue.use(Router)
      
      export default new Router({
        routes: [
          {
            path: '/',
            name: 'comment',
            component: Comment
          }
        ]
      })
    3. 路由懒加载, ES6的import()方法 . (按需加载)
    4. import Vue from 'vue'
      import Router from 'vue-router'
      const HelloWorld = () => import('@/components/HelloWorld')// 写法一
      Vue.use(Router)
      export default new Router({
        routes: [
          {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
          //或者直接方法一写在这里
         component: () => import("@/components/HelloWorld")// 写法二
          }
        ]
      })
    5. vue的异步组件, require()方法 . (按需加载)
    6. import Vue from 'vue'
      import Router from 'vue-router'
      Vue.use(Router)
      export default new Router({
        routes: [
          {
            path: '/',
            name: 'HelloWorld',
            component: resolve => require(['@/components/HelloWorld'], resolve),
          }
        ]
      })
    7. vue的异步组件 + webpack的ensure()方法
    8. import Vue from 'vue'
      import Router from 'vue-router'
      const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld')
      Vue.use(Router)
      export default new Router({
        routes: [
          {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
          }
        ]
      })
  • 相关阅读:
    全选、全不选、反选
    IE Tester 怎样使用firebug 调试工具?
    策略模式
    模板方法模式
    迭代器模式——android中使用
    android 实现圆形波纹动画
    android 窗口的使用
    AlertDialog 基本使用
    国外android 网站
    ViewDragHelper 任意拖动
  • 原文地址:https://www.cnblogs.com/cl1998/p/13205180.html
Copyright © 2011-2022 走看看