Vue路由懒加载

懒加载原理：
路由懒加载的主要原理就是原本的Vue模块是全部导入在一起的打包文件，运行后用户查看相关模块显示的内容时
会将整个打包的文件引入而后在其中查找对应的模块然后才将其呈现给用户。这样会使得在打包文件中查找对应模块时
在浏览器中可能会出现短暂的空白页，从而降低用户体验。而路由懒加载是将各个模块分开打包，在用户查看下相关模
块内容时就直接引入相关模块的打包文件然后进行显示，从而有效的解决了浏览器可能出现短暂时间空白页的情况。

具体操作如下例

//原本将所有模块全部导入
// import home from '../components/home';
// import about from '../components/about';
// import user from '../components/user';

//路由懒加载方式，在用到对应的模块时才会执行导入
const home = () =>
    import ('../components/home');
const about = () =>
    import ('../components/about');
const user = () =>
    import ('../components/user');
const homeNews = () =>
    import ('../components/homeNews');
const homeMessage = () =>
    import ('../components/homeMessage')

//通过Vue.use（插件），安装插件
Vue.use(VueRouter)

//创建VueRouter对象
const routes = [{
        path: '',
        //重定向设置，默认显示的hash为home
        redirect: '/home'
    },
    {
        path: '/home',
        component: home
    },
    {
        path: '/about',
        component: about
    },
    {
        path: '/user/:userId',
        component: user
    }
]