精华内容
下载资源
问答
  • vue路由懒加载

    2020-11-10 17:48:31
    vue路由懒加载 一 、为什么要使用懒加载 可以加载页面更快,给客户更好的体验。 二、使用懒加载 常用的懒加载有两种方法:vue异步组件和ES中的import。 1.不使用懒加载 import Vue from 'vue' import ...

    vue路由懒加载

        一 、为什么要使用懒加载
            可以加载页面更快,给客户更好的体验。
    
        二、使用懒加载 
            常用的懒加载有两种方法:vue异步组件和ES中的import。
    

    1.不使用懒加载

    			import Vue from 'vue'
                import Router from 'vue-router'
                import Login from './../pages/Login/Login'             
                Vue.use(Router)
                export default new Router({      
                    routes: [
                        {
                            path: "/Login",
                            name: "Login",
                            component:Login,
                        }
                    ]
                })
    

    2.vue异步组件实现懒加载

     			import Vue from 'vue'
                import Router from 'vue-router'          
                Vue.use(Router)
                export default new Router({      
                    routes: [
                        {
                            path: "/Login",
                            name: "Login",
                            component: resolve => (require(['./../pages/Login/Login'], resolve)),
                        }
                    ]
                })
    

    3.ES提出的import方法

     			import Vue from 'vue'
                import Router from 'vue-router'
                const Login= () => import ('./../pages/Login/Login')
                Vue.use(Router)
                export default new Router({      
                    routes: [
                        {
                            path: "/Login",
                            name: "Login",
                            component: Login,
                        }
                    ]
                })
    
    展开全文
  • vue 路由懒加载

    2020-05-07 17:24:27
    vue 路由懒加载 { path: '/', name: 'test', component: () => import('./test') }, 路由懒加载:按需加载路由,加快启动速度,路由切换速度会有影响,在大量路由的项目中可以使用,优化项目启动速度。 ...

    vue 路由懒加载

    {
      path: '/',
      name: 'test',
      component: () => import('./test')
    },
    

    路由懒加载:按需加载路由,加快启动速度,路由切换速度会有影响,在大量路由的项目中可以使用,优化项目启动速度。

    展开全文
  • Vue路由懒加载

    2020-10-24 10:39:46
    Vue路由懒加载 对于SPA单页应用,当打包构建时,JavaScript包会变得非常大,影响页面加载速度,将不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这就是路由的懒加载。 实现方式 Vue...

    Vue路由懒加载

    对于SPA单页应用,当打包构建时,JavaScript包会变得非常大,影响页面加载速度,将不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这就是路由的懒加载。

    实现方式

    Vue异步组件

    Vue允许以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。

    Vue.component("async-example", function (resolve, reject) {
      setTimeout(function() {
        // 向 `resolve` 回调传递组件定义
        resolve({
          template: "<div>I am async!</div>"
        })
      }, 1000)
    })
    

    这个工厂函数会收到一个resolve回调,这个回调函数会在你从服务器得到组件定义的时候被调用,当然也可以调用reject(reason)来表示加载失败,此处的setTimeout仅是用来演示异步传递组件定义用。将异步组件和webpackcode-splitting功能一起配合使用可以达到懒加载组件的效果。

    Vue.component("async-webpack-example", function (resolve) {
      // 这个特殊的 `require` 语法将会告诉 webpack
      // 自动将你的构建代码切割成多个包,这些包
      // 会通过 Ajax 请求加载
      require(["./my-async-component"], resolve)
    })
    

    也可以在工厂函数中返回一个Promise,把webpack 2ES2015语法加在一起。

    Vue.component(
      "async-webpack-example",
      // 这个动态导入会返回一个 `Promise` 对象。
      () => import("./my-async-component")
    )
    

    事实上我们在Vue-Router的配置上可以直接结合Vue的异步组件和Webpack的代码分割功能可以实现路由组件的懒加载,打包后每一个组件生成一个js文件。

    {
      path: "/example",
      name: "example",
      //打包后,每个组件单独生成一个chunk文件
      component: reslove => require(["@/views/example.vue"], resolve)
    }
    

    动态import

    Webpack2中,可以使用动态import语法来定义代码分块点split point,官方也是推荐使用这种方法,如果使用的是Bable,需要添加syntax-dynamic-import插件, 才能使Babel可以正确的解析语法。

    //默认将每个组件,单独打包成一个js文件
    const example = () => import("@/views/example.vue")
    

    有时我们想把某个路由下的所有组件都打包在同一个异步块chunk中,需要使用命名chunk一个特殊的注释语法来提供chunk name,需要webpack > 2.4

    const example1 = () => import(/* webpackChunkName: "Example" */ "@/views/example1.vue");
    const example2 = () => import(/* webpackChunkName: "Example" */ "@/views/example2.vue");
    

    事实上我们在Vue-Router的配置上可以直接定义懒加载。

    {
      path: "/example",
      name: "example",
      //打包后,每个组件单独生成一个chunk文件
      component: () => import("@/views/example.vue")
    }
    

    webpack提供的require.ensure

    使用webpackrequire.ensure,也可以实现按需加载,同样多个路由指定相同的chunkName也会合并打包成一个js文件。

    // require.ensure(dependencies: String[], callback: function(require), chunkName: String)
    {
        path: "/example1",
        name: "example1",
        component: resolve => require.ensure([], () => resolve(require("@/views/example1.vue")), "Example")
    },
    {
        path: "/example2",
        name: "example2",
        component: resolve => require.ensure([], () => resolve(require("@/views/example2.vue")), "Example")
    }
    

    每日一题

    https://github.com/WindrunnerMax/EveryDay
    

    参考

    https://zhuanlan.zhihu.com/p/46843949
    https://www.jianshu.com/p/c27b1640a01b
    https://juejin.im/post/6844904025746309127
    https://juejin.im/post/6844904013842874376
    https://segmentfault.com/a/1190000011519350
    https://cn.vuejs.org/v2/guide/components-dynamic-async.html
    https://router.vuejs.org/zh/guide/advanced/lazy-loading.htm
    
    展开全文
  • VUE路由懒加载

    2020-08-05 16:33:36
    为什么需要路由懒加载? 使用懒加载前 import Vue from 'vue' import Router from 'vue-router' import find from "../common/find.vue" import my from "../common/my" import friend from "../common/friend" ...

    为什么需要路由懒加载?
    认识路由懒加载
    使用懒加载前

    import Vue from 'vue'
    import Router from 'vue-router'
    import find from "../common/find.vue"
    import my from "../common/my"
    import friend from "../common/friend"
    import message from "../common/message"
    import unLogin from "../components/unLogin"
    import error from "../common/error"
    import searchResult from "../common/searchResult"
    Vue.use(Router)
    export default new Router({
        mode: 'history',
        routes:[
            {
                path:'*',
                component:error,
                meta: {allowBack: false} 
             },
            {
                path: '/',
                name: 'mes',
                component: find,
                meta: {allowBack: false} 
            },
            {
                path: '/my',
                name: 'mes',
                component: my,
                 meta: {allowBack: false} 
            },
            {
                path: '/friend',
                name: 'mes',
                component: friend,
                meta: {allowBack: false} 
            },
            {
                path: '/message',
                name: 'mes',
                component: message,
                meta: {allowBack: false} 
            },
            {
                path: '/unLogin',
                name: 'mes',
                component: unLogin,
                meta: {allowBack: false} 
            },
            {
                path: '/search',
                name: 'mes',
                component: searchResult
            }
        ]
    })
    

    使用懒加载

    import Vue from 'vue'
    import Router from 'vue-router'
    const find = ()=>import('../common/find.vue')//会动态加载组件
    const my = ()=>import('../common/my')
    const friend = ()=>import('../common/friend')
    const message = ()=>import('../common/message.vue')
    const unLogin = ()=>import('../components/unLogin')
    const error = ()=>import('../common/error.vue')
    const searchResult = ()=>import('../common/searchResult.vue')
    
    Vue.use(Router)
    export default new Router({
        mode: 'history',
        routes:[
            {
                path:'*',
                component:error,
                meta: {allowBack: false} 
             },
            {
                path: '/',
                name: 'mes',
                component: find,
                meta: {allowBack: false} 
            },
            {
                path: '/my',
                name: 'mes',
                component: my,
                 meta: {allowBack: false} 
            },
            {
                path: '/friend',
                name: 'mes',
                component: friend,
                meta: {allowBack: false} 
            },
            {
                path: '/message',
                name: 'mes',
                component: message,
                meta: {allowBack: false} 
            },
            {
                path: '/unLogin',
                name: 'mes',
                component: unLogin,
                meta: {allowBack: false} 
            },
            {
                path: '/search',
                name: 'mes',
                component: searchResult
            }
        ]
    })
    
    展开全文
  • VUE 路由懒加载

    2020-04-03 17:02:18
    文件路径,在vue项目...//以下是import方法路由懒加载,测试方法,看network浏览器监控 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { p...
  • Vue 路由懒加载

    2019-10-07 05:36:37
    1、vue异步组件实现路由懒加载  component:resolve=>(['需要加载的路由的地址',resolve]) 2、es提出的import(推荐使用这种方式)  const HelloWorld = ()=>import('需要加载的模块地址') 详情...
  • Vue路由懒加载.md

    2021-01-14 10:08:31
    Vue路由懒加载.md

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,757
精华内容 702
关键字:

vue路由懒加载

vue 订阅