当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue开发：组件内的导航守卫

vue开发：组件内的导航守卫

2020年07月17日  | 移动技术网IT编程  | 我要评论

故事背景
面试但凡问到vue框架，vue-router是逃不掉的~
vue为我们提供了全局守卫、路由独享的守卫、组件内的守卫，详情戳这vue导航守卫
卤煮借项目里实际的应用场景来讲一下组件内的导航守卫，顺便记录一下小坑~

应用场景
当页面返回上一页的时候，拦截路由，提示用户是否确定离开当前页面，上图~

代码实现
组件内的导航守卫：beforeRouteEnter和beforeRouteLeave两个钩子函数，拦截跳转用到的是beforeRouteLeave，上图~
在这里插入图片描述
这里有个小坑，因为return写习惯了，以为在前面写了return下面就不执行了，实则不然，next在这里执行了，正确的写法如下：
在这里插入图片描述
next()传入true执行跳转，传入false则实现拦截，留在当前页。它也可以接收一个对象，例如：

next({
	path: '/login', params: { // 你想传的参数 }
});

注意！！！
在页面A，用户点击了返回，提示框弹出并且用户点击了确定离开，然后成功返回上一页。当用户通过浏览器导航栏进行返回前进，此时我们组件实例中的isGoback（此时isGoback为true）不会发生改变，再次返回就不会弹出提示框了哦。所以最稳妥的解决方法就是在进入页面的时候重置一下这个变量，这时候就用到beforeRouteEnter这个钩子函数了~
那么问题来了，官方说beforeRouteEnter钩子里面是获取不到this的，这可怎么搞，上图~
在这里插入图片描述
以上利用组件内的导航守卫，完美解决了路由拦截，实现我们上面提到的应用场景，记得勿踩坑~

本文地址：https://blog.csdn.net/yman_pro/article/details/107372970

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网