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

什么是路由的懒加载？

• 当打包构建应用时，js包（只有一个）会变得非常大，影响页面加载
• 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了

简单来说，就是不同的路由对应的那些组件打包到不同的js文件中。只有在这个路由被访问的时候，才加载对应的组件。

打包的命令：npm run build

路由懒加载的实现

懒加载的方式

方式一

结合Vue的异步组件和webpack的代码分析。（不常用）

const Home = resolve => {
    
    require.ensure(['../components/Home.vue'], ()=> {
    
    resolve(require('../components/Home.vue')) })};

方式二

AMD写法

const About = resolve => require(['../components/Home.vue'],resolve);

方式三（常用）

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

const Home = () =>import('../components/Home.vue')
//再放到创建的VueRouter对象中
const routes = [
    {
    
    
        path:'/home',
        component:Home
    }
]

这样写就不用在另外导入了。

路由的嵌套使用

在一个路由里再添加几个路由（套娃模式开始了）

• 比如在home页面中，/home/news和/home/message又是两种不同的访问内容。
• 一个路劲映射一个组件，访问这两个路径也会分别渲染两个组件。

实现嵌套路由的两个步骤

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

假设我们已经创建好了两个Home的子组件Homeaaa.vue和Homebbb.vue。现在就要使用**children**属性去实现映射关系。

在index.js里：

//使用懒加载去导入这两个Home的子组件
const Homeaaa = () => import('../components/Homeaaa')
const Homebbb = () => import('../components/Homebbb')

const routes = [
    {
    
    
        path:'/home',
        component:Home,
        children:[
            {
    
    
                path:'',
                redirect:'aaa'//默认
            }
            {
    
    
                path:'aaa', //这里不需要斜杠
                component:Homeaaa
            },
            {
    
    
                path:'bbb',
                component:Homebbb
            }
        ]
    }
]

这时需要回到Home.vue里面去使用router-link 和router-view

<template>
	<div>
        <h2>我是home</h2>
        //别忘了home前面的"/"
        <router-link to='/home/aaa'>aaa</router-link>
        <router-link to='/home/bbb'>bbb</router-link>
        <router-view></router-view>
    </div>
</template>