Vue路由拆分，动态引入子路由

1. 最基本的路由引入方式

正常情况下, 我们可能会通过这种方式引入路由

• Vue单页面应用(SPA模式)下, 会一次性加载所有的组件, 如果有很多的组件, 就会出现加载慢的情况, 因此, 路由应该按需加载, 可以使用路由懒加载 (官方文档)

import Home from '@/views/home'

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
  ]
})

2.路由懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

注意:

• 如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

食用方式:

const Home = () => import('@/views/home')

importAll(require.context('.', true, /.routes.js/))
export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]

或者也可以这样写:

const Home = () => import('@/views/home')

importAll(require.context('.', true, /.routes.js/))
export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/views/home')
    }
  ]

3. 路由分区

如果我100个路由全部放在router.js文件中, 那么会给后期的维护带来巨大的麻烦

因此对于一个大型的项目, 应该对路由进行分区, 简单来说就是把不同模块的路由从总路由中分解到单独的文件中

• 比如这样:

  
  image.png

• 依旧使用懒加载的方式

export default {
  path: '/table',
  name: 'Table',
  component: () => import('@/views/table')
}

• 继续在总路由中引入

import Table from './table/table.routes.js'

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/views/home')
    },
    Table
  ]
})

4. 动态引入路由

问题: 如果我有一个路由那我就引入一个, 那如果我有100个呢?

使用动态引入路由的方式, 我写一个路由配置, 就自动引入一个

• 直接上代码:

import Vue from 'vue'
import Router from 'vue-router'
import Table from './table/table.routes.js'

Vue.use(Router)

//以下为动态引入路由的代码
+++   const routesList = []
+++   function importAll (r) {
+++     r.keys().forEach((key) => routesList.push(r(key).default))
+++   }
+++   importAll(require.context('.', true, /.routes.js/))

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/views/home')
    },
    Table,
+++    ...routesList
  ]
})

解释一波:

• 使用webpack的语法 require.context() 方法来创建自己的（模块）上下文，这个方法有 3 个参数：
  • 参数1: 要搜索的文件夹目录
  • 参数2: 是否还应该搜索它的子目录，
  • 参数3: 以及一个匹配文件的正则表达式。