路由的懒加载
当使用webpack打包构建应用时, Javascript包会变得非常大,影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了
懒加载:就是用到时才加载文件
■路由懒加载做了什么?
1、路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
2、只有在这个路由被访问到的时候,才加载对应的组件
懒加载使用方法
在router目录的index.js路由文件进行配置
const HelloWorld = () => import("../components/HelloWorld");
routes: [{
path: "/HelloWorld",
component: HelloWorld
}]
路由的嵌套路由
.嵌套路由是一个很常见的功能
1、例如在home页面中,我们希望通过/home/news和/home/message访问一些内容.
2、一个路径映射一个组件,访问这两个路径也会分别渲染两个组件.
使用方法
1、首先导入组件 const namenews = () => import("../components/namenews");
2、然后再父组件中使用children注册组件,并且要在父组件中使用router-link和router-view(注意嵌套的路由path不要加/斜杠)
{
path: "/Namevue",
component: Namevue,
children: [ {
path: "namenews",
component:namenews
}, {
path: "namemessage",
component:namemessage
} ]