vue router提供了addRoutes,却没有提供removeRoutes的解决方案

0 点赞
0 条评论
104 次浏览
发布于 2 个月前

vue router官方提供的一个动态添加路由的方法。但是在很多场景下,我们需要退出登录时清空动态添加路由的方法,这样退出登录后就不需要刷新页面,影响用户体验,但是官方没有提供,所以我自己实现一个重置路由的方法。

我们直接继承vue-router

// Router.js
import VueRouter from 'vue-router';

class Router extends VueRouter {
  constructor(options) {
    super(options);
    this.resetRoutes = this.resetRoutes.bind(this);
  }

  // 重置路由,将路由重置到构造时的路由
  resetRoutes() {
    const { routes, mode } = this.options || {};

    this.matcher = new VueRouter({ routes: routes || [], mode })?.matcher;
  }
}

export default Router;

使用方法和之前相同

// 之前的用法
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
});

export default router;
// 改动后的用法
import Vue from 'vue';
import Router from './Router';
import routes from './routes';

Vue.use(Router);

const router = new Router({
  routes,
});

export default router;

这样退出登录时调用this.$router.resetRoutes()方法重置路由,然后登录成功后根据权限来调用this.$router.addRoutes(路由数组)方法,这样就不用刷新页面了。

版权所属:开发日记
转载时必须以链接形式注明原始出处及本声明。
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...