VUE路由相关07

懒加载

把项目打包以后，在dist的js文件有三个，
第一个是自己写的业务逻辑代码的打包,名称为:app.hash值.js
第二个是为了打包的代码做底层支撑的代码(import导入的),名称为:manifest.hash值.js
第三个是需要用到的三方的js代码(vue之类)名称为:vendor.hash值.js
随着项目的扩增，业务代码增加，第一个js代码会非常多，当用户请求网页的时候，会加载js代码，由于太大，可能出现空白页，这个时候就需要用到懒加载。

1.不使用懒加载

import login from '../vue/login';
import register from "../vue/register";
routes:[{
    path: '/login',
    component: login
  },
    {
      path: '/register',
      component: register
    }],

2.使用懒加载

const login = ()=>import('../vue/login')
const register = ()=>import('../vue/register')
routes:[{
    path: '/login',
    component: login
  },
    {
      path: '/register',
      component: register
    }],

路由守卫

1.全局守卫

//前置守卫(guard)
router.beforeEach((to,from,next)=>{
  document.title = to.matched[0].meta.title;
  next();
})
//后置钩子(hook)
router.afterEach((to,from)=>{
  console.log('----');
})

next()是进入下一个路由，里面可以为路径，也可以为false，可以在进入下一个路由进行判断，看是否进入下一个路径，具体看官方文档。
2.路由独享守卫，具体看官方文档。
3.组件内的守卫，具体看官方文档。
官方文档

keep-alive

当组件内需要频繁切换，那么这个组件的生命周期就会频繁的被创建和销毁，可以把这个组件所在的路由放到缓存中去，即用keep-alive标签把router-view包裹起来。keep-alive组件有两个属性include和exclude属性，属性值都是组件的名字，如果有多个组件，用逗号隔开，不能有空格。include是希望哪些组件被缓存，不写include默认缓存所有的组件，exclude是希望哪些组件不被缓存。

<keep-alive><router-view/></keep-alive>