延迟加载路由

延迟加载路由也称路由懒加载。当应用变得复杂之后，路由组件也会随之增加，在这个时候Webpack的打包机制会将我们的项目中的所有JavaScript打包成一个文件(除了public目录下的JS文件)，这样一来这个JS文件会变得特别大，会拖慢浏览器的加载速度。为此，可以结合Vue的异步组件和Webpack的代码分割功能，从而实现延迟加载，也就是路由懒加载。
在路由配置中，按照如下方式引入路由组件：

{
	path:'/news',
	name:'news',
	component: () => import('@/components/News'),
	meta: {
		title:'新闻'
	}
}

Webpack的import方法可以定义代码分割点，且是动态加载，它返回一个promise对象。这样，只有路由导航到该路径时，才会动态加载该组件。在代码中所有被import()的模块都会被打包成一个单独的JS文件，在路由匹配到该组件的时候，浏览器就会自动去向服务器请求这个资源，从而实现异步加载，大大加快了页面的加载效率。

如果想把嵌套在某个路由下的所有组件都打包在同一个异步块(chunk)中，那么只需要使用特殊的注释语法来提供一个块名来使用命名块。代码如下：

{
	path:'/news',
	name:'news',
	component: () => import(/* webpackChunkName:"home" */ '@/components/News'),
	meta:{
		title:'新闻'
	}
},
{
	path:'/books',
	name:'books',
	component: () => import(/* webpackChunkName:"home" */ '@/components/Books'),
	meta:{
		title:'图书列表'
	}
},
{
	path:'/videos',
	name:'videos',
	component: () => import(/* webpackChunkName:"home" */ '@/components/Videos'),
	meta:{
		title:'视频',
		requiresAuth:true   //标记路由元信息是否需要检测
	}
},

这样News，Books和Videos这三个组件就会被打包到一个名字包含home的JS文件中。