vue-router路由懒加载和权限控制详解
作者：__Construct 发布时间：2024-04-27 15:51:24
标签：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,那么随它去吧
}
});
来源：http://www.cnblogs.com/yuxingliang/p/8031174.html
0
投稿猜你喜欢
今天我们来一起看看Dreamweaver MX 2004在加密FTP 传送 方面的新功能。我们一般在做- Hello大家好，今天说一下python的socket编程，基于python的socket通信的文本框网络聊天首先，实验环境：一个云服务器（
- 假设我们需要一个函数什么事都不干，只是抛出异常（在某些系统中有些handler就是干这事的），我们可以很直观的写出下面的代码：def fun
- 本文以一段简单的监听鼠标、键盘事件的程序，实现获取用户的输入（比如登录某些网站的账号、密码）的功能。经测试，对于一台“裸奔”的电脑，完全能获
- 当服务端对http的body进行解析到map[string]interface{}时，会出现cli传递的是int类型，而服务端只能断言成fl
- python版本：3.6+需要模块：flask，pillow需求：开发一个支持多格式图片上传的接口，并且将图片压缩，支持在线预览图片。目录结
- 前言众所周知字典（dict）对象是 Python 最常用的数据结构，社区曾有人开玩笑地说："Python企图用字典装载整个世界&q
- 最近刚重构完，我们的一个项目，由原来的jsp模式改为了前后端分离，前端选型为vue，开发完成之后第一件时间就是要部署测试，服务端选的是Apa
- 前言最近网站从HTTPS转为HTTP，更换了网址，旧网址做了301重定向，折腾有点大，于是在百度站长平台提交网址，不管是主动推送还是手动提交
- 一、传入的参数类型要求不同：1、 file.write(str)需要传入一个字符串做为参数，否则会报错。write( "字符串&q
- Python中单类继承Python是一门面向对象的编程语言，支持类继承。新的类称为子类（Subclass），被继承的类称为父类、基类或者超类
- SQL Server对上亿的表进行排序或者上亿的表之间进行join，会导致系统失去响应。◆1.我确实做了一个很大的查询，涉及的数据表有两亿条
- 例如：[‘a', ‘b', ‘c'] 输出 [‘a', ‘b', ‘c'] [‘a'
- 1、jieba库基本介绍(1)、jieba库概述jieba是优秀的中文分词第三方库- 中文文本需要通过分词获得单个的词语- jieba是优秀
- 每天都要记得健康打卡尊敬的老师，我忘了这次的健康打卡，反思的时候我想了很多东西，反省了很多事情，自己也很懊悔，触犯了学校的规定，深刻认识到自
- 开发微信小程序过程中，有个需求需要用到日期时间筛选器，查看微信官方文档后，发现官方文档的picker筛选器只能单独支持日期或者是时间，所以为
- 无论安装以下哪种库，强烈建议在新环境下安装，之前在base环境下安装各种报错！！！如何在新环境下安装可参见我之前的总结或网上其他文章。不推荐
- golang拾遗主要是用来记录一些遗忘了的、平时从没注意过的golang相关知识。很久没更新了，我们先以一个谜题开头练练手：package
- 如下所示：找了好久，今天无意中敲出来了：ctrl+l(小写)全局查找某个变量：ctrl+h我用的Eclipse快捷键来源：https://b
- 最近使用工作需要，使用了Navicat8.2版本，发现备份数据都是默认存储在C盘，这个就比较郁闷了。重做系统忘记转移了。那不就死定了？找了一
