在vue中,不使用懒加载的情况下,我们打包后的dist中会有2个文件夹.分别用于存放css 和 js,
在js中,会生成3个js文件: *代表生成的数字字母等
1.app.******.js : 这个js存放的是我们的自己写的逻辑,业务等js代码
2.manifest.*******.js : 这个js是用来存放对我们的js代码等提供底层支撑的代码
3.vendor.********.js : 这个js是用来存放,第三方的代码的 ,如:vue等
在这种情况下,随着我们写的代码越来越多,那么app.*****.js 文件会不断变大.这就会导致用户打开我们的页面时可能会出现一段空白期,用户体验非常差
那么如何解决呢?
懒加载:在用的时候再去加载
我们应该使用路由的懒加载.什么意思呢?也就是我们每有一个路由,那么就生成一个单独的js文件;
之前我们采用comment.js或者es6的方式导入路由文件. 如: import Home from '../components/Home'
现在,使用懒加载的方式进行导入: const Home = () => import('../components/Home')
这时,再进行打包,我们去dist文件中的js文件里就可看到在原有的基础上,又多出了新的js文件.
以上就是个人对懒加载的理解
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
登录功能,路由的导航守卫
//to: 将要去往的页面 from 从哪个页面开始 next 放行函数-----------------》 next()=== 直接放行; next('/login') === 强制跳转
router.beforEach((to,from,next)=>{
//如果用户访问的登录页,就直接放行
if(to.path === '/login') return next();
//获取token
const tokens = window.sessionStorage.getItem('token');
//如果token为空,那么强制跳转到登录页
if(!tokens) return next('/login')
//有token就直接放行
next();
})