注意:是动态加载不是动态路由

解决的问题: 动态配置菜单栏的路由参数--实现菜单级的权限控制

问题成因:

  在vue实例化的时候vuex、vue-router 就需要加载完毕,无法使用异步的方式从服务器获取带权限的菜单路由.

方式一:

  该方式产生于2017年3月之前;

  解决思路:

  1. 在进入login页面时就请求出来所有的路由配置存到vuex 中
  2. 登录成功后请求带权限的菜单,( 实质所有的菜单路由都生效了, 用户还可以直接通过直接输入路径访问到)
  3. 在每次路由切换的时候都进行拦截校验是否有权限访问该菜单.

  不足:

  • 至少多次请求了一次菜单
  • 每次路由切换都需要拦截重复请求权限接口    

方式二:

  配合全新的API   addRoutes实现路由的动态加载爽歪歪.代码等会奉上 ---  公司代码不让粘   最近也比较忙  所以非常抱歉了

vue路由动态加载的更多相关文章

  1. angular 路由动态加载JS文件

    纯属分享 //把下面代码放在新建JS文件里,引入在头部 //angural路由功能--一个路由动态加载JS (function (name, context, definition) { if (ty ...

  2. vue中动态加载img

    想实现动态加载图片,当点击“首页”时,图片变色 代码如下: <mt-tabbar v-model="selected" fixed class="border-1p ...

  3. vue中动态加载组件+开发者模式+JS参数值传递和引用传递

    今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...

  4. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  5. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  6. vue如何动态加载本地图片

    大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势. 以下正文: 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个im ...

  7. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  8. vue路由页面加载的几种方法~

    懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)为什么需要懒加载: 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  9. vue 路由懒加载 resolve vue-router配置

    使用方法 component:resolve => require(['@/pages/About'],resolve) //"@"相当于".." 懒加载 ...

随机推荐

  1. 减少apk包大小的一种思路

    现在apk大小主要是决定于两个:一个是图片一个是.SO文件(这个尽量用release包),而对于图片,既要越小,又要保持质量. 之前是PNG --> JPG, 现在直接是PNG ---> ...

  2. 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~

    今天小编为大家推荐一个神奇的酷站.ECharts,一个纯 Javascript 的图表库. 以下是各个几个不错的界面的介绍: 首页:http://echarts.baidu.com/ 在首页有完整的说 ...

  3. Windows中读写ini文件

    .ini 文件是Initialization File的缩写,即初始化文件,是windows的系统配置文件所采用的存储格式,来配置应用软件以实现不同用户的要求.配置文件有很多种如ini配置文件,XML ...

  4. GDAL多光谱与全色图像融合简单使用

    目录 简述 C++代码 效果对比 GDAL融合效果和原始多光谱波段对比 GDAL融合效果和原始全色波段对比 ARCGIS融合效果与原始全色和多光谱对比 GDAL融合效果与ArcGIS融合效果对比 简述 ...

  5. 批处理文件 bat 后台运行

    当运行 批处理文件bat 时 , 会有一个黑窗口显示 , 对于不懂的人来说, 还是很吓人的;  有两种办法,可以让bat后台运行,不出现黑窗口   第一种解决办法(推荐) : 在你写的批处理文件,开头 ...

  6. 动态绑定事件到特定dom元素上,包含新增加的

    $('body').on('click', 'a.detail-data', function (e) { //动态事件绑定 为body元素下所有的a.detail-data元素添加一个事件 包括新增 ...

  7. 【20180111】【物流FM专访】贝业新兄弟李济宏:我们是如何做到大件家居B2C物流第一的?

    在2017年的双11中,贝业新兄弟承接了日日顺家装和卫浴行业的仓储和配送,上海仓和武汉仓双十一期间及时出库率为100%,KPI位列第一:此外,贝业新兄弟还是科勒18年以来中国区唯一的物流服务商以及宜家 ...

  8. Spring Boot入门一:在Eclipse中使用Spring boot

    1.安装插件 打开Eclipse-Help-Eclipse Marketplace-搜索spring tools,找到对应工具安装 下载完成后,重启eclipse,选择新建project-spring ...

  9. Object C函数指针@selector

    其作用相当于函数指针,现在我看到的大多说用法都是在调用某些函数需要传递一个 函数指针 参数时,使用@selector.它会在当前类里面查找selector后面所跟的函数,返回一个SEL类型的值.  S ...

  10. Java JDK下载、安装与环境变量配置

    https://blog.csdn.net/siwuxie095/article/details/53386227 https://blog.csdn.net/liudongdong19/articl ...