vue-router路由懒加载以及嵌套路由的实现

一.vue-router打包文件的解析

在vuecli中，打包文件夹dist下会分为css和js文件夹，分别存储css和js打包代码。
而在js文件夹下又分为三部分：

• app: 存放当前应用程序开发的所有代码（业务代码）
• manifest: 为了打包的代码做底层支撑
• vendor: 提供商，第三方（如vue、vue-router、axios）

二.认识路由的懒加载

当我们在打包构建应用时，打包后的app.js包会变得非常大，甚至会影响到静态资源服务器的查询时间，导致页面加载时间过长。如果我们能把不同路由对应的组件打包到不同的js文件中，然后当路由被访问时才加载对应的组件，这样就更高效了。

路由懒加载做了什么？

• 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
• 只有这个路由被访问的时候，才加载对应的组件（否则，如果将所有的业务代码都打包到一个js文件中，当路由被访问时，需要从上到下查找整个js文件，时间消耗极大）

引用后直接使用的打包后文件：

路由懒加载后的打包后文件：

三.懒加载的方式

在ES6中，我们可以使用更加简单的写法来组织Vue异步组件和webpack的代码分割

const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')

一个懒加载会对应生成一个js文件

四.认识嵌套路由

• 比如在home页面，我们希望通过/home/news和/home/user访问一些内容，即在大路径下嵌套子路径
• 一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

实现嵌套路由有两个步骤

• 创建对应的子组件，并且在路由映射中配置对应的子路由
• 在组件内部使用router-view标签

实现案例：
1.创建新路由子组件

<template>
    <div>
        <ul>
            <li>新闻1</li>
            <li>新闻2</li>
            <li>新闻3</li>
            <li>新闻4</li>
        </ul>
    </div>
</template>

<script>
    export default {
     
        name:'HelloNews'
    }
</script>

2.在index.js中添加映射，此时添加在父组件里面

path:'/hello',
    component: Hello,
    children:[  // children
      {
     
        path:'',
        redirect:'news'
      },
      {
     
        path:'news',  // 子组件的路径中不需要加'/'
        component:HelloNews
      },
      {
     
        path:'message',  
        component:HelloMessage
      }

3.在对应的父组件模板中填写router-link与router-view

<template>
        <div>
            <h2>我是首页</h2>
            <p>我是首页界面，啊哈哈哈</p>
            <router-link to="/hello/news">新闻</router-link> //to后面的链接要写全
            <router-link to="/hello/message">消息</router-link>
            <router-view></router-view>
        </div>
</template>
    
    <script>
        export default {
     
            name:'Hello'
        }
    </script>