vue-router 二 懒加载、路由的嵌套

认识路由懒加载

打包文件解析

dist文件夹：
这里的代码都是做了丑化处理的

• app.xxxxxxxx.js :当前应用程序开发的所有代码（业务代码）
• manifest.xxxxxxx.js:为打包的代码做底层支撑（模块化中ES 6 、CommonJs等）
• vendor.xxxxxxxx.js:第三方提供商（例如：vue、vue-router、axios、bs等）

---

当app中业务足够复杂，app中的代码量越来越大，如果一次性请求下来，会造成页面的空白，影响用户体验。

---

对策：懒加载
1.请求公共文件
2.一个路由打包一个js文件，按需请求

不使用懒加载时，router下的index.js代码：

//1.导入路由模块
import Vuerouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'
//2.通过Vue.use(插件)，安装插件
Vue.use(Vuerouter)

//3.创建路由对象
const router = new Vuerouter({
  //配置路由和组件之间的应用关系
  routes:[
    {
      path:'/Home',
      component:Home
    },
    {
      path:'/About',
      component:About
    },
    {
      path:'/User/:id',
      component:User
    }
  ]
})

//4.将router对象传入Vue实例中
export default router

使用懒加载

component:()=>import('../components/Home')

//1.导入路由模块
import Vuerouter from 'vue-router'
import Vue from 'vue'
//2.通过Vue.use(插件)，安装插件
Vue.use(Vuerouter)

//3.创建路由对象
const router = new Vuerouter({
  //配置路由和组件之间的应用关系
  routes:[
    {
      path:'/Home',
      component:()=>import('../components/Home')
    },
    {
      path:'/About',
      component:()=>import('../components/About')
    },
    {
      path:'/User/:id',
      component:()=>import('../components/User')
    }
  ]
})

//4.将router对象传入Vue实例中
export default router

路由的嵌套

• 在路由中嵌套其他的路由 希望通过 /Home/news 或者 /Home/message 访问一些内容
• 一个路由映射一个组件，访问这两个路径时也会分别渲染这两个组件
  

使用步骤

一、创建对应的子组件，并且在路由映射中配置对应的子路由

HomeNews组件：

HomeMessage组件基本上同

路由配置：
默认路由可以在children中添加如下代码：

二、在组件内部使用 标签

Home组件中：