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: 以及一个匹配文件的正则表达式。
网友评论