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
          }
        ]
      })
  • 相关阅读:
    JavaSE 基础
    Mybatis(三) 动态SQL
    Java基础(十)
    Java基础(九)
    Java基础(八)
    Java基础(七)
    centos7怎么把语言切换成英语
    CentOS更改yum源与更新系统
    快速切換前後日期
    laravel 框架给数组分页
  • 原文地址:https://www.cnblogs.com/cl1998/p/13205180.html
Copyright © 2011-2022 走看看