vue-router路由懒加载和权限控制详解


Posted in Javascript onDecember 13, 2017

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,那么随它去吧
 }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
React中的render何时执行过程
Apr 13 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 #Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 #Javascript
实例分析js事件循环机制
Dec 13 #Javascript
javascript实现QQ空间相册展示源码
Dec 12 #Javascript
自定义PC微信扫码登录样式写法
Dec 12 #Javascript
基于模板引擎Jade的应用(详解)
Dec 12 #Javascript
jquery获取transform里的值实现方法
Dec 12 #jQuery
You might like
基于pear auth实现登录验证
2010/02/26 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
python文件写入实例分析
2015/04/08 Python
python清理子进程机制剖析
2017/11/23 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Python对excel的基本操作方法
2021/02/18 Python
接口的多继承会带来哪些问题
2015/08/17 面试题
营销与策划应届生求职信
2013/11/04 职场文书
高中军训感言800字
2014/03/05 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2014年团总支工作总结
2014/11/21 职场文书
化验员岗位职责
2015/02/14 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL