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(路由数组)方法,这样就不用刷新页面了。
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...
最热文章
好玩的CSS3(3)-- 翻转(旋转正反两张)图片
2065 浏览 · 0 评论
浏览器后退跳转到指定的页面
2038 浏览 · 0 评论
Flutter适配夜间模式
1524 浏览 · 0 评论
JavaScript实现继承的几种方法
1250 浏览 · 0 评论
【面试题】创建长度为100的数组
1173 浏览 · 0 评论
使用dart-sass替换node-sass
822 浏览 · 0 评论
最新文章
centos7中编译安装nginx
86 浏览 · 0 评论
JavaScript计算两个颜色之间的渐变色值
111 浏览 · 0 评论
vue router提供了addRoutes,却没有提供removeRoutes的解决方案
104 浏览 · 0 评论
基于Axios的封装和请求接口的管理
197 浏览 · 0 评论
使用verdaccio搭建私有npm仓库
224 浏览 · 0 评论
pc端常用电脑屏幕分辨率尺寸适配
513 浏览 · 0 评论