持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
自学前端
- 前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是路由相关知识
- 这是基于我学习的笔记而来的文章
认识路由的懒加载
-
官方给出了解释:
- 当打包构建应用时, javascript包会变得非常大, 影响页面加载
- 如果我们能把不同路由对应的组件分割成不同的代码块, 然后当路由被访问的时候才加载对应的组件, 这样就更加高效了
-
用到时, 再加载
-
官方在说什么呢
- 首先, 我们知道路由中通常会定义很多不同的页面.
- 这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中
- 但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大
- 如果我们一次性从俯卧器请求下来这个页面, 可能需要花费一定的时间, 甚至用户电脑上还出现了短暂空白的情况
- 如何避免这种情况呢? 使用路由懒加载就可以了
-
路由懒加载做了什么?
- 路由懒加载的主要作用就是将路由对应的组件打包成一个个小的js代码块
- 只有在这个路由被访问到的时候, 才加载对应的组件
-
懒加载的方式
-
方式一: 结合Vue的异步组件和Webpack的代码分析
const Home = resolve => {require.ensure(['../components/Home.vue'], () => {resolve(require('../components/Home.vue'))})};
-
方式二: AMD写法
const About = resolve => require(['../components/About.vue'], resolve);
-
方式三: 在ES6中, 我们可以有更简单的写法来组织Vue异步组件和Webpack的代码分割
const Home = () => import('../components/Home.vue')
- 认识嵌套路由
-
嵌套路由是一个很常见的功能
- 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
- 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件
-
路径和组件的关系
/home --> Home
/home/news --> News
-
实现嵌套路径有两个步骤
- 创建对应的子组件, 并且在路由映射中配置对应的子路由
- 在组件内部使用
-
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于webpack的, 希望大家喜欢
- vue的作者是中国人尤雨溪, 非常厉害的人
