zoukankan      html  css  js  c++  java
  • vue中使用延时加载

    延时加载在vue组件


     

    new Vue({
      // ...
      components: {
        AsyncCmp: () => import("./AsyncCmp")
      }
    });

    通过将import函数包装到箭头函数中,Vue将仅在请求时执行它,并在该时刻加载模块。

    延时加载在vue-router


    Vue路由器内置支持延迟加载它就像使用该import功能导入组件一样简单假设我们想在/ login路由中延迟加载一个Login组件

    // Instead of: import Login from './login'
    const Login = () => import("./login");
    
    new VueRouter({
      routes: [{ path: "/login", component: Login }]
    });

     

    延时加载在vuex模块


     Vuex有一种registerModule方法可以让我们动态创建Vuex模块。如果我们考虑到该import函数返回的Promise上来延迟加载模块:

    const store = new Vuex.Store()
    ...
    // Assume there is a "login" module we wanna load
    import('./store/login').then(loginModule => {
      store.registerModule('login', loginModule)
    })
  • 相关阅读:
    C# 使用布尔操作符
    C# 复合赋值操作符
    C# while语句
    C# do while语句
    datatabe 与string
    打开外部程序并
    group by 显示
    GROUP by 方法  C#
    屏幕取色
    C#简单继承示例详解——快速入门
  • 原文地址:https://www.cnblogs.com/embrace-ly/p/10838206.html
Copyright © 2011-2022 走看看