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

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

问题成因:

　　在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. python接口自动化测试(三)-requests.post()

    上一节介绍了  requests.get()  方法的基本使用,本节介绍  requests.post()  方法的使用: 本文目录: 一.方法定义 二.post方法简单使用 1.带数据的post 2 ...

  2. LeetCode: Gray Code [089]

    [题目] The gray code is a binary numeral system where two successive values differ in only one bit. Gi ...

  3. 树莓派进阶之路 (038) - P2P 文件下载机

    硬件要求: 树莓派开发板 USB外接硬盘 一. Together 1. 更新安装程序 sudo apt-get update sudo apt-get upgrade sudo apt-get ins ...

  4. hive SQL 静态分区和 动态分区

    Hive 分区介绍: hive中简单介绍分区表(partition table),含动态分区(dynamic partition)与静态分区(static partition) hive中创建分区表没 ...

  5. 抓包神器 tcpdump 使用介绍

    tcpdump 命令使用简介 简单介绍 tcpdump 是一款强大的网络抓包工具,运行在 linux 平台上.熟悉 tcpdump 的使用能够帮助你分析.调试网络数据. 要想使用很好地掌握 tcpdu ...

  6. CDC在sql server 2017中无法使用的问题

    Symptom === sp_MScdc_capture_job in the CDC job raised error message Msg 217, Level 16, State 1, Pro ...

  7. vue及ElementUI环境搭建

    1. nodejs安装及npm安装 下载地址:https://nodejs.org/en/download/ 选择windows Installer 下载完成后 运行node-v8.11.1-x64. ...

  8. iOS 开发网络篇—监测网络状态

    iOS开发网络篇—监测网络状态 一.说明 在网络应用中,需要对用户设备的网络状态进行实时监控,有两个目的: (1)让用户了解自己的网络状态,防止一些误会(比如怪应用无能) (2)根据用户的网络状态进行 ...

  9. WordPress <= 4.6 命令执行漏洞(PHPMailer)复现分析

    漏洞信息 WordPress 是一种使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设属于自己的网站.也可以把 WordPress 当作一个内容管理系统(C ...

  10. spring boot重启脚本

    jar包同目录添加 start.sh 添加启动权限chmod 755 start.sh ./start.sh ps -ef|grep test |grep -v grep|awk '{print $2 ...