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

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

问题成因:

  在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. 一个会学习(观察->活学->求变)的人,在任何领域都能变得强大无比

      开始今天的话题之前,我说个小故事.   很早以前有一部美剧,叫<Hero>.   大概讲的是正反两派都是一群有超能力的人,彼此为了某个巨大的阴谋互相撕逼了十多集.虽然剧情很老套,但是让 ...

  2. SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  3. Linux中安装mongodb

    1,使用二进制包安装Mongodb 使用wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.6.0.tgz 下载编译好的二进制包( ...

  4. 【转载】systemctl命令完全指南

    Systemctl是一个systemd工具,主要负责控制systemd系统和服务管理器. Systemd是一个系统管理守护进程.工具和库的集合,用于取代System V初始进程.Systemd的功能是 ...

  5. [HBase Manual]CH5 HBase运行模式:单实例和分布式

    HBase运行模式:单实例和分布式 HBase运行模式:单实例和分布式 1.单实例模式 1.1 单实例在HDFS下 2.分布式 2.1 伪分布式 3完全分布式 HBase有2种运行模式,单实例和分布式 ...

  6. 【Log】SLF4J简单入门

    SLF4J介绍 SLF4J,即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种各样的日志系统.按照官方的说法,SLF4J是一个用于日 ...

  7. 【GMT43智能液晶模块】例程十:DMA实验——存储器到存储器的传输

    实验原理: DMA(直接存储器访问)传输不需要占用CPU,可以在存储器至存储器实现高速的数据 传输.本实验采用DMA2控制器的数据流0,选用通道0进行数据传输.通过液晶控制传输 和结果显示. 示例截图 ...

  8. linux清理日志脚本

    1.删除日志的命令 find 目录路径 -mtime +天数 -name "文件名" -exec rm -rf {} \; 例如:#!/bin/bash find /usr/loc ...

  9. C#编程高并发的几种处理方法

    并发(英文Concurrency),其实是一个很泛的概念,字面意思就是“同时做多件事”,不过方式有所不同.在.NET的世界里面,处理高并发大致有以下几种方法: 1,异步编程 异步编程就是使用futur ...

  10. 【AI】基本概念-准确率、精准率、召回率的理解

    样本全集:TP+FP+FN+TN TP:样本为正,预测结果为正 FP:样本为负,预测结果为正 TN:样本为负,预测结果为负 FN:样本为正,预测结果为负 准确率(accuracy):(TP+TN)/ ...