Vue3实现动态路由addRoute(ts)

459 阅读1分钟

实现原理也是根据当前登录用户的菜单,动态生成用户能看到哪些具体的菜单。

  • 首先写好所有匹配的路由,格式如下
  • 下main这两种图都是在src下的router文件夹的user或者role对应的文件夹下创建的。

1.png 1.png

2.png

然后进行路由的动态匹配

3.png

4.png

上面封装好的mapMenuToRoutes方法,在store登录模块中进行了调用,因为在点击登录时,就获取了登录用户能看到的菜单,然后在mutations里,把actions请求回来的useMenu传到该函数里。然后,再利用router对象的addRouter方法,把mapMenuToRoutes里的返回值routes添加到main一级路由下面。

action.png

m.png

下面这张图片是在总的store里分发的actions 说.png

下面这张图也是在actions里写的代码,是因为用vuex存储数据的话,即使在登陆状态,然后刷新页面也会丢失数据,所以从本地存储中读取各种数据,然后重新commit`` mutations vjue.png