路由拦截.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 // 用作判断是否显示弹窗

}

}

}

beforeRouteEnter (to, from, next) {

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

this.isShow = true; // 此时想让弹窗显示

next(false);

} else {

next();

}

},

结果报错。。

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

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

beforeRouteEnter (to, from, next) {

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

console.log(this); // undefined

next(vm => {

console.log(vm); // Vue 组件实例

vm.isShow = true;

});

}

},

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

next(vm => { // 传入回调函数

console.log(vm); // Vue 组件实例

vm.isShow = true;

});

next(false); // 无效了

解决方法：

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

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

// Modal/index.js

import Vue from 'vue';

import MyModal from './MyModal.vue';

const MyAlert = Vue.extend(MyModal); // 使用基础 Vue 构造器，创建一个“子类”

// 因为 MyAlert 是一个对象，若要把它当做插件使用，必须提供 install 方法

MyAlert.install = (data) => {

const ins = new MyAlert({

data,

}).$mount(); // 创建一个实例，并手动挂载

document.body.appendChild(ins.$el); // 把真实的DOM加到页面上

}

export default MyAlert;

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

// main.js

import router from './router';

import MyAlert from './Modal';

router.beforeEach((to, from, next) => {

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

MyAlert.install({

isShow: true // 这里传入的参数就是刚刚封装的MyModal里面的data参数

})

next(false);

} else {

next();

}

})

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