matcher之动态增减路由

优化项目时,有个环节在主路由下,根据后端返回不同内容,需要修改动态路由。如果直接删除原来路由,再addrouter新路由,发现原来的路由还是存在的。vue动态新增路由,没有删除功能(vue官方文档好像没有提供)。

解决办法

使用matcher :

const createRouter = () =>  new Router({
    routes: [{
            path: '/',
            name: '登录',
            component: login
        }]
const router = createRouter()
export function resetRouter () { 
 const newRouter = createRouter()
 router.matcher = newRouter.matcher
}
export default router

局部引入,在addrouter之前调用一次 resetRouter即可:

import {resetRouter} from '@/router'
 resetRouter();
 this.$router.addRoutes(routeMenu);

番外

如果需要删除添加一级路由下面单个子路由时,可以通过this.$router.options.routes获取到路由数组,通过循环方式直接进行push或splice,然后再用上面的方法进行全局替换即可。 

vueRouter动态追加路由

路由分为静态路由,如事先写好的,公共的路由,如:404、login等

还有一部分是根据权限接口返回,动态追加的一些页面模块路由,如:user

在处理权限的时候,可以先允许一些不需要权限认证的路由,如下:

// 开放的路由,可以直接访问
const ALLOW_ROUTES = [
  '/login',
  '/buy',
  // ...
];

具体路由拦截全在router.beforeEach里处理

首先如果没有登录,直接跳转登录页

if (!ALLOW_ROUTES.includes(to.path) && !isLogin) { // 未登录
  next({
    path: '/login',
    replace: true
  });
  return;
}

如果已登录,使用router.addRoutes追加路由

if(isLogin && (sessionStorage.getItem('curPath') || to.matched[0].path === '*')  ) {
  sessionStorage.removeItem('curPath');
  // 还原路由(防止路由重复)
  router.matcher = new VueRouter({
    // mode: 'history',
    routes
  }).matcher;
  router.addRoutes(routes: Array<RouteConfig>); // 追加路由
  // util.generateMenu(); // 生成菜单,视具体情况而定
  next({
    path: to.path
  });
  return;
}

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

curPath用于辅助处理

router.afterEach(to => {
  // 保存路径
  if (to.path !== '/login') {
    sessionStorage.setItem('curPath', JSON.stringify({
      path: to.path
    }));
  }
})

动态路由主要是根据业务来的,不好写成一个公共的处理方式,具体在什么时候追加路由,要自己去判断,如:刷新、退出登录、重新登录、没有匹配到等操作是否满足

如果还遇到路由重复的问题,可能是在当前页push同样路由造成的,这里可以先判断一下

if(router.currentRoute.name !== 'login') {
  router.push({
    name: 'login'
  })
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。 

vueRouter--matcher之动态增减路由方式的更多相关文章

  1. 关闭iOS原生MPVolumeView音频路由菜单

    我正在使用MPVolumeView允许用户在使用我的应用程序时控制他喜欢的音频路径.该代码显示了该视图:当用户点击音频路由按钮时,会出现一个带有可用选项的菜单.问题:显示音量视图的屏幕可能需要隐藏,因为我的应用程序处理各种事件,我想同时隐藏音频路由菜单我的问题:有没有人知道是否可以手动关闭MPVolumeView的音频路由选择菜单而无需用户按下取消按钮?解决方法在iOS8上,您可以使用以下使用私有API的代码

  2. iOS:使用蓝牙音频输出(kAudioSessionProperty_OverrideCategoryEnableBluetoothInput)AudioSession

    >如果有可用的A2DP设备,我的音频路由将始终自动切换到kAudioSessionOutputRoute_BluetoothA2DP路由.如何防止此路线更改?我希望你们中的一些人可以帮助我解决这些问题.这对我对CoreAudio的整体理解,特别是AudioSession框架,真的有帮助.解决方法AudioSession是一项棘手的业务.1.BluetoothHFPaudiooutputisonlypossibleincaseofAudioSessionkAudioSessionCategory_PlayA

  3. Swift3.0 Swift2.3 获取IP地址 获取网关地址

    最近需要在Swift项目中获取路由器的网关地址,在网上找了半天的代码也没发现太多有价值的东西,而且大多都是OC代码,很少有Swift的相关代码,只找到了一个通过Swift代码获取设备IP的代码,最后实在没办法只能曲线救国了。下面上代码:思路就是把获取到的设备IP地址的最后一位手动修改为”1”,前面三位不需要修改,比如我的手机ip地址是192.168.31.212,所以网关地址就是192.168.31.1。最近苹果更新了Swift3.0,这里更新一下代码。

  4. Swift3.0服务端开发(二) 静态文件添加、路由配置以及表单提交

    今天博客中就来聊一下Perfect框架的静态文件的添加与访问,路由的配置以及表单的提交。也就是webroot的文件目录变地方了。后方的尾随闭包是对响应的处理。action的地址就是我们在服务器端配置的路由地址“127.0.0.1:8181/login”,而表单提交的方式是POST。

  5. Swift Web 开发之 Vapor - 路由二

    路由参数Vapor提倡使用类型安全的路由参数来接收数据,我们可以在路由方法中使用Swift类型来指定参数类型,Vapor会在内部解析并将参数返回给闭包以供使用,非常方便。Swift中处处有协议,路由参数也是如此,我们所见例子中的Int其实就是Vapor给实现了StringInitializable协议,当然String也已经默认实现。throw另外一大特性就是可以直接在路由中抛出异常,我们可以throw任何遵从Swift.Error协议的对象,当然Vapor已经为我们封装好了几个常用的Error来方便我们

  6. swift – Singleton模式和正确使用Alamofire的URLRequestConvertible

    如果是这样,我该如何设置经理的基础?此外,如果我使用这个管理器//这可以与上面显示的路由器结构一起工作?我是Alamofire图书馆的新手,迅速。然而,当您获得超过6或7例的情况下,这很快就会变得很快。首先,您的模型对象需要符合RouterObject协议。最后一个问题是您无法直接在Routerenum中存储baseURL或OAuthToken。但是,如果您只是使用默认会话触发网络,那么sharedInstance可能就足够了。

  7. Android VPNService路由排除

    我正在使用OpenVPN和ICS附带的新VpnServiceAPI有没有办法从VPN隧道中定义IP地址的排除?

  8. android – 如何以编程方式在蓝牙和手机之间选择媒体音频

    我需要有一组按钮,其操作类似于JB拨号器中的媒体输出选择器,它将选择“耳机”“扬声器”和“电话听筒”.我可以打开和关闭扬声器,但是在标准手机和蓝牙耳机之间进行媒体输出之间的切换使我望而却步.我如何构建和选项,如控制媒体输出的拨号器?

  9. vue3获取当前路由地址

    本文详细讲解了vue3获取当前路由地址的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  10. flutter 路由机制的实现

    本文主要介绍 flutter 中的路由实现原理,包括初始化时的页面加载、切换页面的底层机制等。具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部