Vue 路由懒加载 和 路由导航守卫

在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();

})