Vue-router路由import 与 require 区别和懒加载

📖摘要

---

今天分享下 —— Vue router 路由 import 与 require 使用区别以及懒加载，欢迎关注！

---

🌂node 编程

node 编程中最重要的思想就是模块化，import 和 require 都是被模块化所使用。

---

✨import 与 require 区别：

• 遵循规范
  • require 是 AMD 规范引入方式
  • import 是 es6 的一个语法标准，如果要兼容浏览器的话必须转化成 es5 的语法
• 调用时间
  • require 是运行时调用，所以 require 理论上可以运用在代码的任何地方
  • import 是编译时调用，所以必须放在文件开头
• 本质
  • require 是赋值过程，其实 require 的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
  • import 是解构过程，但是目前所有的引擎都还没有实现 import ，我们在 node 中使用 babel 支持 ES6 ，也仅仅是将 ES6 转码为 ES5 再执行，import 语法会被转码为 require

---

💖定义vue-router

1. import方式

import Login from '@/pages/views/Login'
import Home from '@/pages/views/Home'

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  }
]

2. require 方式，异步加载-组件异步加载即为路由的异步加载

export default [
    {
      path: '/user',
      name: 'user',
      component: resolve => require(['路径'], resolve)
    },
    {
      path: '/detail',
      name: 'detail',
      component: () => resolve => require(['路径'], resolve)
    }
]

3. 官方默认的懒加载方式，用更加简单的写法来组织 Vue 异步组件和 Webpack 的代码分隔

export default [
    {
      path: '/detail',
      name: 'detail',
      component: () => import('路径')
    }
]

4. webpack 提供的 require.ensure()，vue-router 配置路由，使用 webpack 的 require.ensure 技术，也可以实现按需加载。这种情况下，多个路由指定相同的 chunkName，会合并打包成一个 js文件。

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('路径')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('路径')), 'demo')
}

至此结束，下一篇：vue 中使用 动态添加路由(router.addRoutes) 加载侧边栏的方式

最后感谢大家耐心观看完毕，留个点赞收藏是您对我最大的鼓励！

---

🎉最后

• 更多参考精彩博文请看这里：《陈永佳的博客》

• 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！