代码按需引入
import Vue from 'vue'
import VueRouter from 'vue-router'
// "@"相当于".."
import Detail from '../pages/goodsDetail'
import Msg from '../components/message.vue'
// 使用路由Vue.use(VueRouter)
export default new VueRouter({
mode: 'history',
routes: [
{
// 进行路由配置,规定'/'引入到home组件
path: '/',
component: resolve => require(['../pages/home.vue'], resolve),
meta: {
title: 'home'
}
},
{ path: '/msg',
component: Msg
},
{ path: '/detail',
component: Detail,
children: [
{path: 'msg',
component: Msg}
]
}
]
如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。
当你用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js。
你可以打包的时候看看目录结构就明白了。
本文来自 bujiongdan 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/bujiongdan/article/details/81503275?utm_source=copy