路由的懒加载:用到的时候再加载
概念:懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。
作用:因为路由通常会定义很多不同的界面,而在打包的时候,一般情况下是统一打包到一个js文件中,这样必然会造成这个js文件非常大,如果一次性从服务器请求这么大的页面,可能需要花费一定的时间。所以,为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题,路由的懒加载就可以应用上了。
实现:将路由对应的组件打包成一个个的JS代码块,只有在这个路由被访问到的时候,才加载对应的组件,即是对应的js文件。常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import
我们常用ES中的import方法去实现路由懒加载:
component: () => import(/* webpackChunkName: "User" */ '../views/User')
![0010a5c4e6de7cfebe9a2e526840b323.png](https://i-blog.csdnimg.cn/blog_migrate/8567388c0bbab73c456dfe89887ef084.jpeg)
项目打包完后,多出了对应的js文件:
![437467d02ec4ef720aa1de99fa57bacb.png](https://i-blog.csdnimg.cn/blog_migrate/852a8b0fd2a1129490fb0de777bd4253.jpeg)
路由的嵌套:
一个路径映射一个组件,访问这两个路径也会分别渲染两个组件:
![89c3ae602ed084482b222bd3e8cce66a.png](https://i-blog.csdnimg.cn/blog_migrate/abc448f1690441eebe11e92a0e889ed9.jpeg)
路由的嵌套有两个步骤:
①创建对应的子组件,并且在路由映射中配置对应的子路由。例如:在About组件中嵌套News、Message两个界面。在路由器中在About配置中通过children来实现路由的嵌套:
![af651445ca6df7b6a368041292fbc58d.png](https://i-blog.csdnimg.cn/blog_migrate/16d36b23fedceca3c936e2c26cffe0e7.jpeg)
PS:children里面的path值不需要 '/' 。
②在About组件内容使用标签来进行界面显示位置:
![b90ca3c1b16894271762e175edf4fe40.png](https://i-blog.csdnimg.cn/blog_migrate/fbe5c86b638ad54ac89596d90d5b83d1.jpeg)
PS:这个to里面的路径一定是要完整的路径,即 to="/about/news" 不能 to="/news"
运行结果:
![ac160a32f1918c0b989445710ab98be8.png](https://i-blog.csdnimg.cn/blog_migrate/0abfe4a4c0a3a701a6589d006cbffea0.jpeg)
如果嵌套里面也需要一个默认界面,则在children里面设置一个默认值:
![5d617ee31e9001dcbbc1bd58ae996a60.png](https://i-blog.csdnimg.cn/blog_migrate/9a4c997ac483746601db4735ee593e2a.jpeg)
PS:也是要这样里面的路径是完整的路径