router路由的懒加载和嵌套路由

路由的懒加载

当使用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

        } ]