zoukankan      html  css  js  c++  java
  • vue-路由懒加载

      上一篇说过,vue-cli对打包的文件进行分类,在浏览器进行读取时减少了一定的压力

       如果在大型的Vue项目中,mainfest和vendor可能并不会占太大的空间,可app是我们写业务代码的地方,很大概率会出现太大业务代码在这个文件的情况。因此能不能把这里面的某些代码给抽取出来放在其他的JS文件里呢?下面路由的懒加载就能实现了

      路由的懒加载是说:当使用到这个路由对应的组件时,才去服务器上读取。

      这时候可能有人会问:这个跟抽取app中的代码有什么关系?是这样的,本来app中关于路由对应组件的代码被抽离出来,一个路由对应组件会抽离成一个JS文件,有多少个路由映射规则就意味着多少个JS文件。一来就分担了app.xxx.js的代码量,二来也不用加载全部的路由对应组件的JS代码,等使用的时候才读取。

      那如何实现路由的懒加载?做法特别简单,只需要将之前的导入组件的写法做一个变更即可,如下:

    const Home = () => import('../views/Home.vue')
    const About = () => import('../views/About.vue')
    const User = () => import('../views/User.vue')
    
    const routes = [
      {
        path: '/',
        name: 'portal',
        redirect: '/home'
      },
      {
        path: '/home',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component: About
      },
      {
        path: '/user/:userId',
        name: 'User',
        component: User
      }
    ]
  • 相关阅读:
    Python之路【第四十五篇】:django日更
    Python之路【第四十四篇】:django日更
    C++ 调用动态链接库
    博客园美化
    postgresql中的UUID
    使用rustup安装rust环境
    MySQL 查询做排名
    Docker
    CentOS安装Docker和基础操作
    切换CentOS7的yum源为阿里源
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14605875.html
Copyright © 2011-2022 走看看