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

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

问题成因:

　　在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. ionic1页面切换动画卡顿优化

    https://github.com/shprink/ionic-native-transitions https://www.npmjs.com/package/ionic-native-trans ...

  2. Exception thrown on Scheduler.Worker thread. Add `onError` handling

    <html> <head></head> <body> java.lang.IllegalStateException: Exception throw ...

  3. 【打印】windows打印控件，Lodop.js介绍

    1.Lodop.js这插件很强大,目前仅支持windows系统 2.使用原生javascript编写 3.lodop支持客户端安装,c-lodop支持服务器端安装 4.无论客户端还是服务器端,都必须是 ...

  4. java mqtt

    代码: package cc.gongchang.mqtt; import java.net.URISyntaxException; import org.fusesource.hawtdispatc ...

  5. maven创建helloword项目

    [root@666 maven_work]# mvn archetype:create -DgroupId=helloword -DartifactId=helloworld [INFO] Scann ...

  6. Win10正式企业版激活方法

    Win10正式企业版激活方法 在正式开始激活Win10正式企业版系统之前,我们需要先查看一下当前Win10正式企业版系统的激活状态: 右击桌面左下角的“Windows”按钮,从弹出的右键菜单中选择“控 ...

  7. 干货 | Elasticsearch 集群健康值红色终极解决方案【转】

    题记 Elasticsearch当清理缓存( echo 3 > /proc/sys/vm/drop_caches )的时候,出现 如下集群健康值:red,红色预警状态,同时部分分片都成为灰色.  ...

  8. Asp.Net Newtonsoft.Json使用教程

    json序列化和反序列化的使用教程 实体 public class wendaModel { private string _title; private string _cons; public s ...

  9. 无法加载协定为“ServiceReference1.xxxxxx”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。

    原因是在web.config 文件中多次引用了“添加外部引用” <system.serviceModel> <bindings> <basicHttpBinding> ...

  10. IMAP 读取含有附件邮件超慢问题

    添加以下配置: Properties props = new Properties(); props.setProperty("mail.imap.partialfetch", & ...