1.这是我们通用的写法
import Vue from 'vue'
import Router from 'vue-router'
import one from '../components/one'
import two from '../components/two'
import three from '../components/three'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: one
},
{
path: '/two',
component: two
}, {
path: '/three',
component: three
}
],
mode:'history'
})
2.这是懒加载的写法
其实就是动态的导入我们的组件,在我们需要的时候,加以渲染,懒加载有一个好处,就是需要的时候才加载,避免了一次请求,加载过多的js文件,造成项目第一次请求的卡顿。懒加载有三种写法,其他的由于已经过时,这里就不过多书写,大家就用这种方式即可,记住 import('../components/one')
的时候,路径注意一下就好
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component:()=>import('../components/one')
},
{
path: '/two',
component:()=>import('../components/two')
}, {
path: '/three',
component:()=>import('../components/three')
}
],
mode:'history'
})
3.如何判断你是否成功配置了懒加载呢
3.1看看没有懒加载的时候的js代码
在项目的dist目录下的static下的js中,大家可以看到三个js文件,这里我稍加介绍一下(名字截取了部分,相信大家可以看懂哦)
- app.js 我们自己书写的的业务代码
- manifest.js 作为底层支撑的代码,因为有的浏览器不支持es6等语法,这里的底层支撑会帮我们转化我们的代码,让大部分的浏览器都能适配
- vendor 第三方组件的代码
因为没有懒加载,我们的项目在第一次访问的时候,就会加载整个app.js,当项目大了之后,第一次访问就会有卡顿的现象。
这是通过浏览器的调试查看到的
3.2 照着上面的方式,修改代码,重新编译,对比加了懒加载后的js代码
修改完,我们重新 build 一下项目 (不是重启动哦 是重新构建)
npm run-script build
可以看到,我们多了三个js文件,为什么是三个呢?因为我们上面路由的动态导入写了三个映射路径嘛,你有几个路径,到时候,就有几个对应的js
启动项目,再次访问,大家可以看到这里我们多加载了一个2.js,这就说明懒加载成功了。也有的小伙伴会疑惑,本来是一个app.js 现在是两个,哪里会更快了,不是扯淡嘛?
但其实这些多出来的js就是从app.js中抽取出来的,这样app.js小了,总体上是更快的。