• vue 初始化项目未完成时 跳转路由延迟问题 页面切换过慢 (路由懒加载引起的问题)


    vue 初始化项目未完成时 跳转路由延迟问题 页面切换过慢 (路由懒加载引起的问题)

    由于项目过大,所以使用了路由懒加载,每次第一次切换路由的时候,都要去加载相应的组件(js文件),需要等文件加载完之后,路由才能切换过去;(非首次切换的路由就没有这个问题)

    我碰到的问题是:前提: 项目初始化的时候,默认路由是首页,我刚进入页面的时候加载的是首页的js和其他数据(好处:白屏时间短些),其他页面都是路由懒加载的,所以我只要是不切换到相应的路由,路由所对应的文件就不会被加载

    过程:我进入首页后,由于首页数据过多 ,我的首页上的登录按钮刷新出来后,我立马点击按钮,发现并没有反应(此时还是在加载首页的数据),要一直等到首页的数据加载完成了,才会接着加载登录页面的数据文件,加载完成了才进行跳转,等待的时间有点久

    解决:我登录页面的路由不写成懒加载模式 (直接引用,不使用懒加载(不异步加载))

    import Vue from "vue";
    import Router from "vue-router";
    import loginPage from '@/components/page/Login/Login.vue'
    
    Vue.use(Router);
    
    const VueRouterPush = Router.prototype.push;
    Router.prototype.push = function push(to) {
      return VueRouterPush.call(this, to).catch(err => err);
    };
    
    export default new Router({
      // mode: 'history',
      routes: [
        {
          path: "/",
          redirect: "/home",
          name: "home"
        },
        {
          path: "/login",
          name: "login",
          // component: () => import("../components/page/Login/Login.vue")
          component: loginPage
        },
        {
          path: "/register",
          name: "register",
          component: () => import("../components/page/register/register.vue")
        },
        {
          path: "/home",
          name: "home",
          component: () => import("../components/page/home/home.vue")
        },
    
    ……………………
    
    
  • 相关阅读:
    过往总结
    查找光标处的标识符
    【转】Linux 内核开发 Eclipse内核开发环境搭建
    【转】Writing linux kernel code in Eclipse
    【转】 Linux内核升级指南
    [转]Ubuntu 11.04 安装后要做的20件事情
    【转】vim 替换操作大全
    【转】移动硬盘安装ubuntu
    重置 Winsock 目录
    【转】让Firefox像vim一样操作
  • 原文地址:https://www.cnblogs.com/panghu123/p/15545042.html
Copyright © 2020-2023  润新知