vue-router路由懒加载和权限控制详解
更新时间：2017年12月13日 09:20:10 作者：__Construct
这篇文章主要介绍了vue-router路由懒加载和权限控制的相关资料
vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo
所以下面介绍下，路由懒加载
1、为什么要使用路由懒加载呢
用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题，当我们用到某个路由后，才去加载对应的组件，这样就会更加高效
2、用法
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
meta: {
requiresAuth: true
},
component: resolve => require(['components/Hello.vue'], resolve)
},
{
path: '/about',
component: resolve => require(['components/About.vue'], resolve)
}
]
})
3、对路由钩子进行权限控制
//注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
//获取store里面的token
let token = store.state.token;
//判断要去的路由有没有requiresAuth
if(to.meta.requiresAuth){
if(token){
next();
}else{
next({
path: '/login',
query: { redirect: to.fullPath }
// 将刚刚要去的路由path（却无权限）作为参数，方便登录成功后直接跳转到该路由
});
}
}else{
next();//如果无需token,那么随它去吧
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 录制视频并压缩视频文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，该组件将不会销毁，这篇文章主要介绍了关于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue.extend使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue3 实现验证码倒计时功能，倒计时的运用场景是获取手机验证码倒计时、获取邮箱验证码倒计时等场景，本文结合示例代码给大家详细讲解，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue下拉列表功能实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
本篇文章主要介绍了详解Vue中一种简易路由传参办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue2项目中如何使用clipboard复制插件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue中Echarts使用动态数据的两种实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
今天做项目需要一份根据本地数据的筛选分页功能，下面小编把vuejs实现本地数据的筛选分页功能的实现思路分享到脚本之家平台，需要的朋友可以参考下2017-11-11
这篇文章主要为大家介绍了解决threeJS加载obj gltf模型后颜色太暗的方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论