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

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

问题成因:

　　在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. Convert ResultSet to JSON and XML

    public static JSONArray convertToJSON(ResultSet resultSet) throws Exception { JSONArray jsonArray = ...

  2. PL/SQL学习笔记之事务

    一:事务自动提交的开启与关闭 1)开启事务自动提交:则每一个INSERT,UPDATE或DELETE命令执行时,都提交一次事务. SET AUTOCOMMIT ON; 2)关闭事务自动提交:则执行到C ...

  3. 【nginx&php】后台权限认证方式

    一.最常用的方法(代码中限制) 1.如何限制IP function get_new_ip(){ if(getenv('HTTP_CLIENT_IP')) { $onlineip = getenv('H ...

  4. Python import语句导入模块语法[转]

    Python import语句导入模块语法 社区推荐:掘金是国内最活跃的技术社区,我们每日有优质Python开发实例分享,海量python开源库推送.来掘金,和更多懂技术的小伙伴交流.   pytho ...

  5. 【转】jQuery 的 ajax 方法，返回结果 readyState=4 并且 status=200 时，还进 error 方法

    今天在使用jquery.ajax方法去调用后台方法时,ajax中得参数data类型是"JSON",后台DEBUG调试,运行正常,返回正常的结果集,但是前端一直都进到ajax的err ...

  6. SQL格式化插件—SQL Pretty Printer

    在SQL Server中我们经常需要编写各种SQL脚本,例如存储过程和函数等,由于在编写过程中,经常会进行调整,格式很乱,可读性很差.对于有强迫症的人来说,看这样的代码非常痛苦,必须要手动对代码进行格 ...

  7. Specified version of key is not available (44)

    -- ::, ERROR [HiveServer2-Handler-Pool: Thread-]: transport.TSaslTransport (TSaslTransport.java:open ...

  8. halcon之NCC匹配

    NCC匹配 基于Normalized cross correlation(NCC)用来比较两幅图像的相似程度已经是一个常见的图像处理手段.在工业生产环节检测.监控领域对对象检测与识别均有应用.NCC算 ...

  9. mac下安装mysql5.7.18，连接出现Access denied for user 'root'@'localhost' (using password: YES)

    mac下,mysql5.7.18连接出错,错误信息为:Access denied for user 'root'@'localhost' (using password: YES) ()里面的为she ...

  10. Linux 用户管理_015

    一.用户基础了解 Linux是一个多任务.多用户的操作系统,每个用户和进程都需要对应一个用户和用户组,用户名相当于姓名, 用户UID相当于身份证号,用户组GID相当于公司的工号.用户与用户组的关系一对 ...