Vue - vue-router- 路由的懒加载和路由的嵌套

---

0、打包文件的解析

打包后, 所有的路由文件都会被打包到一个 app.js 文件里, 导致app.js文件非常大, 会影响页面的加载速度

一、路由的懒加载

当打包构建应用时, Javascript包会变得非常大, 影响页面加载.

我们希望把不同路由对应的组件分割成不同的代码块, 然后当路由被访问的时候才加载对应组件.

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
只有在这个路由被访问的时候才加载

二、路由懒加载的方式

index.js

import VueRouter from 'vue-router'
import Vue from 'vue'

// 懒加载的方式导入
const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')
const User = () => import('../components/User.vue')

// 安装插件
Vue.use(VueRouter)

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userid',
    component: User
  }
]

const router = new VueRouter({
  routes,
  mode: 'history'
})

export default router

三、路由的嵌套

比如在home页面中, 我们希望通过 /home/news 和 /home/message访问一些内容.
一个路径映射一个组件, 访问这两个路径也会分别渲染

3.1 路由嵌套有两个步骤

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

3.1.1 创建对应的子组件

3.1.2 在父组件里面配置

以懒加载的方式导入.

配置映射关系

在首页里面占位