vueRouter--matcher之动态增减路由方式

目录
  • matcher之动态增减路由
    • 解决办法
    • 番外
  • vueRouter动态追加路由
    • 具体路由拦截全在router.beforeEach里处理
    • curPath用于辅助处理

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'
  })
}

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

赞 (0)

相关推荐

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • vue实现动态路由详细

    目录 一.前端控制 1.在router.js文件(把静态路由和动态路由分别写在router.js) 2.store/permission.js(在vuex维护一个state,通过配角色来控制菜单显不显示) 3.src/permission.js 4.侧边栏的可以从vuex里面取数据来进行渲染 二.后端控制路由 1.store/permission.js,在vuex里面发送请求获取数据 2.整理一份数据结构,存到表里 3.写一个转化方法,把获取到的数据转换成router结构 主流的实现方式: 简单

  • 全面解析vue router 基本使用(动态路由，嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route,

  • 讲解vue-router之什么是动态路由

    讲解vue-router之什么是动态路由

    前言: 今天我来给大家说道说道v-router,这是个什么东西?我们先从动态路由讲起. GitHub:https://github.com/Ewall1106/mall/tree/master 1.动态路由有一个什么适用场景呢? 比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态. 2.官方文档 首先我们来看看官方文档上是怎么解释动态路由的?(https://router.vuejs.org/zh-cn/) 你可以在一个路由中设置多段"路径参数&qu

  • vueRouter--matcher之动态增减路由方式

    目录 matcher之动态增减路由 解决办法 番外 vueRouter动态追加路由 具体路由拦截全在router.beforeEach里处理 curPath用于辅助处理 matcher之动态增减路由 优化项目时,有个环节在主路由下,根据后端返回不同内容,需要修改动态路由.如果直接删除原来路由,再addrouter新路由,发现原来的路由还是存在的.vue动态新增路由,没有删除功能(vue官方文档好像没有提供). 解决办法 使用matcher : const createRouter = () =>

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

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

  • vue-router之nuxt动态路由设置的两种方法小结

    方法一:router-link <div class="slide-item" v-for="user in shareData.users"> <nuxt-link :to="'/community/member/'+ user.id"> <img src="../../static/head.png" alt=""> <p>{{user.nickname}

  • vue+element使用动态加载路由方式实现三级菜单页面显示的操作

    需要用到中间件的方式,这样就可以实现了我们想要的方式 publish-center.vue <template> <router-view></router-view> </template> <script> export default { } </script> <el-menu :default-active="$route.path" class="el-menu-vertical-dem

  • vue使用require.context实现动态注册路由

    vue使用require.context实现动态注册路由

    需求场景: 在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥.基于此出发点,考虑能否自动读取文件夹下的文件进行路由注册. 借鉴思路: 参考vue的功能基础组件的自动化全局注册,看到一个require.context方法,可以读取某个文件夹下的文件信息.因此考虑,使用这个方法,获取views文件夹下的.vue页面,文件夹名称作为路由名称 require.context的使用介绍: 一个webpa

  • AngularJS使用ng-class动态增减class样式的方法示例

    本文实例讲述了AngularJS使用ng-class动态增减class样式的方法.分享给大家供大家参考,具体如下: 使用ng-class可以实现动态地增减样式: <!DOCTYPE html> <html ng-app="formExample"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/a

  • vue-router传递参数的几种方式实例详解

    vue-router传递参数分为两大类 编程式的导航 router.push 声明式的导航 <router-link> 编程式的导航 router.push 编程式导航传递参数有两种类型:字符串.对象. 字符串 字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数: this.$router.push("home"); 对象 想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由.查询参数,下面分别说明两种方式的用法和注意事项. 命名路由

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

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

  • 详解vue-router传参的两种方式

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 vue-router传参两种方式:params和query params.query是什么? p

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

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

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

随机推荐