vue-router动态路由添加及路由刷新后消失的解决办法

1、袭闹取出非第一级的所有数据

2、映射出所有路举坦由规则

3、添加路由

4、 登录成功后 保存菜单数据，拍答罩保存后在vuex直接触发添加事件即可 this.commit('add_route')

假设有这样的需求，点击这个“私密”，进不去这个组件页，Vue-router会进行拦截，然后d窗提示信息。

这种情况，方案有好几种：全局守卫、路由独享守卫、组件内守卫均可实现

比如使用组件内守卫:

但是， 某天我觉得浏览器的原生d窗太丑了，我想 自定义一个d窗 ，不用 window.alert()

于是开开心心的去自行封装一个d窗组件了（过程先忽略）型蠢

投入使用：

结果报错。。

查了下文档，原来，在beforeRouterEnter 之前，此时的 this 是 undefined，并不是漏友Vue实例对象。。因为当守卫执行前，组件实例还没被创建；

但是可以通过 next 传入回调函数获取到 Vue 组件实例

但是， next() 传入了回调函数，就不能传 false 进行拦截了。。。

利用 Vue.extend() 构造出一个实例，然后手动挂载

先把刚刚封装的d窗组件放到一个Modal（名字随便）文件夹下，里面再创返租槐建文件index.js

然后到 main.js 中导入路由和这个插件即可食用了

但是还是有问题，因为当挂在完成的时候，还没有把DOM添加到页面上，所以无法使用 进入时候的过渡动画<transition>，因为当挂载结束，过渡动画也结束了。此时还没有添加到页面。。

---