什么是路由的懒加载?
- 当打包构建应用时,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>