一.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>