vue阻止弹窗_Vue，路由拦截，弹窗提示

路由拦截.gif

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

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

// router.js

const routes = [

{

path: "/protect",

name: "protect",

component: Protect

];

比如使用组件内守卫:

// Protect.vue

beforeRouteEnter (to, from, next) {

if (to.name === "protect") {

window.alert("请先登录");

next(false); // 禁止进入

}

},

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

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

投入使用：

// Protect.vue

export default {

data() {

return {

isShow: false // 用作判断是否