vue router提供了addRoutes,却没有提供removeRoutes的解决方案
1 点赞
1 条评论
2011 次浏览
发布于 2022-04-25 16:29
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(路由数组)方法,这样就不用刷新页面了。
"赞助我们,我们才能做的更多&更好"
赞助支持
1 条评论
写下你的评论...
雪海幽梦
11 个月前
给你的方案点赞,确实有用!
最热文章
使用dart-sass替换node-sass
5192 浏览 · 0 评论
浏览器后退跳转到指定的页面
3867 浏览 · 0 评论
好玩的CSS3(3)-- 翻转(旋转正反两张)图片
3860 浏览 · 0 评论
Flutter适配夜间模式
3611 浏览 · 0 评论
pc端常用电脑屏幕分辨率尺寸适配
3571 浏览 · 0 评论
最新文章
js通过扫码枪快速录入的实现
406 浏览 · 0 评论
使用 WebSocket 实现你画我猜实时绘图
746 浏览 · 0 评论
基于code-server部署自己的云端vscode
2872 浏览 · 0 评论
支付宝动态收款码生成自定义金额及备注
2864 浏览 · 0 评论
使用 nohup 命令将程序挂载在后台执行
1960 浏览 · 0 评论
基于OpenLayers实现离线地图
2802 浏览 · 0 评论