今天,遇到一个需求: 点击添加按钮时,resolve组件时,同时动态添加一个路由记录, 添加路由的原因是防止children的耦合,
然后开始百度addRouted(),发现都是很多年前一些讲权限控制的文章, 挺有兴趣的看了一下,
大多思路是:
1: 写几个静态理由记录,比如:['/', 'login'],
2:app.vue的create()中判断isLogin == true时,true时ajax获取menu,以及路由,
3: 渲染菜单以及路由.
ps:进路由的方式是: 刷新,获取登录后的跳转
会出现的问题是: 刷新进路由, ajax还未complete时,vue以及vue-route已经初始化好了,而create只会执行一次,导致只有静态路由,所以匹配到了404
(现在很难看懂别人文章的一个原因就是思路,9102年了, 潜意识里都知道promise,async,等同步方法,所以没有感觉到别人说的坑到底是什么)
给出的一些解决方法:
从异步着手: 1: 在new vue()之前读缓存, 缓存来自于登陆成功的回调操作,然后又觉得把路由信息放缓存不安全
2: 把静态路由'*'拿出来, 这样刷新时就不会匹配到任何路由, 直到ajax成功,并addRoutes()
从ajax时机着手:
1: 把从create()改成beforeEach()
思路: 刷新时,找不到路由记录则到404页面,addRoute()之后$router.push(),触发boforeEach()
我的思路,根本不用那么麻烦,干嘛非要后端初始化路由记录,'
前端直接写好完整的路由记录,加上meta:{role: 100,200,300}, 仅仅登陆成功时ajax一个用户的权限数字,举例:100,
然后渲染所有含有mega.role为100的路由记录就可以了,刷新时(boforeEach)时Array.includs(用户身份)
--啥问题都没有
-- 话说我只是为了看一下addRoutes()怎么用而已,一个百度就是一下午,还看了些垃圾文章,气死了