Vue，路由拦截，弹窗提示

JavaScript086

Vue，路由拦截，弹窗提示,第1张

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

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

比如使用组件内守卫:

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

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

投入使用：

结果报错。。

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

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

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

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

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

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

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

记录登录失效时，跳转到登陆页面，消息弹窗过多，影响用户体验的问题，如图。

我们可以重写message来优化这一功能。

1、先写一个resetMessage.js

2、在引入elementUI的文件内引入该js文件。（main.js或router.js）

注意：挂载自定义message必须放在Vue.use(ElementUI)后面，才能覆盖element-ui默认的message，不然没有效果

这样就不用担心重复点击会弹出好多弹框了

3、在vue页面使用

4、在JS中引用

这样就可以只弹一个了。

-modules：放置模块的文件夹，里面有一个 alert 文件夹，用于存放 alert 插件 ； -Alert.vue：就是我们要在多处用到提示弹窗组件； -index.js：对于该自定义插件的一些配置； 1.alert 2.confirm原文 https://blog.csdn.net/sinat_40697723/article/details/106036056