vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

在我不知道vue的路由还可以通过addRoutes动态添加时，我只知道vue的路由都是写死在路由表中的，每当跳转时再去加载相应的路由。直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API，立马研究了一下。

router.addRoutes：

函数签名：

router.addRoutes(routes: Array<RouteConfig>)

动态添加更多的路由规则。参数必须是一个符合routes选项要求的数组。

点这里去看router.addRoutes的官方解释

白话就是需要动态加入到路由表中的路由是必须要跟我们提前写死的路由规则是一样的。

有了这个玩意儿我们就可以依据系统管理员给用户分配的权限来实现不同的用户可以进入不同的菜单页面的功能，是不是很nice？是不是很优秀？

但这个还不是本文的重点，本文的重点是“不能将需要动态添加的路由存入缓存！” 为什么这么说呢？

先说说我们的需求吧。

我们的项目开发中的动态路由是提前配好在路由表中的，只是和静态路由分开写在了两个对象中，导出的时候默认只导出静态路由，所谓的静态路由就是所有用户都可以访问到的公共路由，比如登录页面、404页面等。而不同用户可访问不同的菜单页面是根据接口返回的一个菜单code来过滤提前配好的动态路由(提前配好的动态路由中也有一个code)，再将过滤后的路由使用router.addRoutes动态添加即可。可能有些公司是通过接口直接把用户的动态路由表按照路由的规则形式给返回了出来，前端只需拿到路由表稍作处理然后addRoutes就可以了。每个公司有每个公司的想法，你开心就好！

接下来就是我们项目中的路由过滤了，这里省略1000字，路由过滤完成并动态添加后就可以很愉快的访问菜单页面了。但我想的是，在全局路由守卫中请求接口返回的code（这里接口返回的是一个包含code和其他数据的json数组，所以我还得先把接口返回的code给过滤出来），然后再过滤路由，然后再动态添加，这对性能来说是一个不小的开销，所以我就琢磨着能不能把首次过滤好的路由给存在缓存中，这样下次就可以直接动态添加缓存中的路由了，岂不是是一件很美好的事情，结果是我想错了，你们都想错了！

来先看看过滤后打印出来的路由吧：

再来看看从缓存中读出来的路由吧：

从两张图上红色矩形圈圈可以看出，从缓存中读出来的路由信息已经发生了改变，父路由中的render方法也没有了（第一张图中父路由的render方法还是有的，到了第二张就没有了），且子路由children里边已经没有了component属性（从第二张图中的红色箭头处可以看出），这显然不是我们想要的路由信息。有人说可以使用import xxx from ‘xxx'来替代component的值，这个针对父路由的component都引用了同一个Layout组件来说是可以的，但是子路由呢？从缓存中读出来的子路由连component都没有了，即使是有这个属性，但子路由都引用了不同的component，那你怎么玩？况且将过滤后的路由信息通过缓存的存取来实现，安全上就会有问题，因为如果户手动修改了缓存里的路由，那你所谓的动态路由权限岂不是立马破功了。

所以，我们能做的就只能是在每次切换路由时都要重新请求接口并根据返回的code来动态过滤路由并添加，或者根据后端返回的动态路由表直接添加，性能上浪费一点也是没有办法的事儿，总比实现不了或不安全来的更好一点。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue动态路由缓存不相互影响的解决办法

    关于react与vue中的key 之前在学习react的时候,常常遇到循环渲染组件时会提示需要在循环组件中加上key属性,比如有一组列表: import React, { Component } from 'react'; export default calss MainApp extends Component { state = { student: [ { name: 'Jenny', id: 'a001' }, { name: 'Jerry', id: 'a002' }, ] } re

  • vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

  • javascript动态添加表格数据行(ASP后台数据库保存例子)

    javascript动态添加表格数据行(ASP后台数据库保存例子)

    在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方.比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种不是以单独页面的形式添加,这种动态添加是在同一个页面下动态添加,最后再一起提交到服务器保存到数据库中. 本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子. 浏览器:IE.6.0 后台:ASP (VBScript ) 前台:HTML + JavaScript HTML代码: 复

  • JS & JQuery 动态添加 select option

    今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);

  • JS实现给对象动态添加属性的方法

    本文实例讲述了JS实现给对象动态添加属性的方法.分享给大家供大家参考,具体如下: 在工作用要用到给jd对象动态添加属性的要求,在网上找到了一种解决方式,实例如下: 1.demo var aa="maker"; var bb=123; var lists={}; eval("lists."+aa+"="+bb); eval('('+"lists."+aa+"="+bb+')'); console.log(li

  • jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 具体不多说了,请看下面的代码吧. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <h

  • Android开发中button按钮的使用及动态添加组件方法示例

    本文实例讲述了Android开发中button按钮的使用及动态添加组件方法.分享给大家供大家参考,具体如下: MainActivity.java package com.example.lab2; import android.os.Bundle; import android.app.Activity; import android.content.Context; import android.view.Menu; import android.view.View; import andro

  • jQuery实现为table表格动态添加或删除tr功能示例

    本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: <!-- 订单明细dialog --> <div id="contractDetailDiv" title="销售订单明细" style="display:none;"> <table class="exhibit_table" id="contractDeta

  • vue 解决addRoutes动态添加路由后刷新失效问题

    vue 解决addRoutes动态添加路由后刷新失效问题

    前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面. 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击

  • Vue 动态添加路由及生成菜单的方法示例

    写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.

  • vue实现权限控制路由(vue-router 动态添加路由)

    用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏. 思路如下: 一.定义初始化默认路由. 二.动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配. 三.通过匹配,把匹配好的路由数据addRoutes到路由中. 四.为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次加载动态路由. 具体代码如下: router.js import Vue from 'vue' import {router} from './i

随机推荐