您的位置：首页 > 编程技术 > js  >  vue router 动态路由清除方式

vue router 动态路由清除方式

 更新时间：2022年5月25日 14:43  点击：1485 作者：小小心晴已存在

router 动态路由清除

重置matcher可达到路由还原效果

在用户退出时调用 resetRouter(router) 即可还原路由

import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap } from '...' //导入初始化router
 
// 传入当前router
export function resetRouter (router) {
  const createRouter = () =>
    new Router({
      mode: 'history'
      routes: constantRouterMap
    })
  // 用初始化的matcher替换当前router的matcher
  router.matcher = createRouter.matcher 
}

附matcher分析：https://www.jb51.net/article/244590.htm

vue-router退出登录清空路由

router没有提供清空数据的方法。我们可以这样写

this.$router.replace({path: '/login'});
location.reload();

以上为个人经验，希望能给大家一个参考，也希望大家多多支持猪先飞。

原文出处：https://blog.csdn.net/qq_22103707/article/details/120160623

[!--infotagslink--]

相关文章

  • @CacheEvict 清除多个key的实现方式

    这篇文章主要介绍了@CacheEvict 清除多个key的实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-13

  • IDEA中的clean,清除项目缓存图文教程

    这篇文章主要介绍了IDEA中的clean,清除项目缓存图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25

  • 解决vue的router组件component在import时不能使用变量问题

    这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27

  • Vue-Router的routes配置详解

    在使用vue-router的项目中,实例化VueRouter是其配置选项routes该选项指定路由与视图的组件的关系或者路由与其他路由的关系，Router配置选项中是其中最重要的配置。本文就详细的介绍一下...2021-10-25

  • Vue如何优雅的清除定时器

    定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器，本文就介绍了Vue如何优雅的清除定时器，感兴趣的可以了解一下...2021-07-22

  • 解决vue-router路由拦截造成死循环问题

    这篇文章主要介绍了解决vue-router路由拦截造成死循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05

  • vue router路由参数刷新消失问题的解决方法

    这篇文章主要介绍了vue-router路由参数刷新消失的问题...2017-06-24

  • vue-router为激活的路由设置样式操作

    这篇文章主要介绍了vue-router为激活的路由设置样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • 关于springboot中nacos动态路由的配置

    这篇文章主要介绍了springboot中nacos动态路由的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-11

  • 详解vue+vueRouter+webpack的简单实例

    这篇文章主要介绍了详解vue+vueRouter+webpack的简单实例，非常具有实用价值，需要的朋友可以参考下...2017-06-24

  • Vue.js实战之利用vue-router实现跳转页面

    对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。...2017-04-03

  • AngularJS ui-router (嵌套路由)实例

    本篇文章主要介绍了AngularJS ui-router (嵌套路由)实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。...2017-03-13

  • vue-router history模式服务器端配置过程记录

    vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于vue-router history模式服务器端配置的相关资料,需要的朋友可以参考下...2021-06-08

  • vue-router 基于后端permissions动态生成导航菜单的示例代码

    本文主要介绍了vue-router 基于后端permissions动态生成导航菜单的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-30

  • vue-router懒加载的3种方式汇总

    这篇文章主要给大家介绍了关于vue-router懒加载的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-28

  • JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法

    多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言，当鼠标点击此文本框的时候能够将里面的默认文本清除，当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框...2016-01-14

  • React Router 如何使用history跳转的实现

    这篇文章主要介绍了React Router 如何使用history跳转的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-06

  • 详解vue-router的Import异步加载模块问题的解决方案

    这篇文章主要介绍了详解vue-router的Import异步加载模块问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-14

  • 怎么清除sql server日志

    方法1： 第一步： backup log database_name with no_log 或者 backup log database_name with truncate_only --no_log和truncate_only是在这里是同义的，随便执行哪一句...2016-11-25

  • CSS不得不掌握的技巧【清除float浮动】

    本文我们来讲讲CSS必备掌握的重点：清除float浮动clear，掌握此内容，可以让你在css+div布局中，一些浮动问题得心应手。 一、浮动产生原因 一般浮动是什么情况呢?一般是...2016-09-14