组件内守卫beforeRouteEnter和beforeRouteLeave
一个坑:beforeRouteEnter 和 afterRouteLeave 是没有【r】的!!!
beforeRouteEnter用法和其他守卫差不多。
有个注意的地方就是beforeRouteEnter不能用this获取组件内收据。
在next()方法内存入vm这个参数,获取组件内数据。
beforeRouteEnter(to,from,next){ next(vm=>{vm.data}) }
例子:
<template>
<div>test</div>
</template>
<script>
export default {
name: "Test",
data () {
return {
data:"数据"
};
},
beforeRouteEnter(to,from,next){
if(to.path==="/test"){
alert("请登录");
next(vm=>{
console.log(vm.data); }) next('/login')
}
} }
</script>
<style lang="css" scoped>
</style>
beforeRouteLeave用来判断页面是否离开
例子:
<template>
<div>
test
</div>
</template>
<script>
export default {
name: "Test",
data () {
return { };
}, beforeRouteLeave(to,from,next){
if(confirm("离开么?")){
next();
}else{
next(false)
}
}
}
</script>
<style lang="css" scoped>
</style>
组件内守卫beforeRouteEnter和beforeRouteLeave的更多相关文章
- 解决vue组件内前置路由守卫beforeRouteEnter无法获取上下文this
问题描述 vue框架,只有在报名页面报名成功,然后自动跳转到订单详情,才弹出一个引流弹窗,其他情况均不弹出,我就想到使用vue 的组件内前置守卫beforeRouteEnter来实现.beforeRo ...
- vue组件路由守卫钩子函数(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
用法:与mounted,created等同级并列. export default { data() { return { } }, methods: { go() { this.$router.pus ...
- vue 组件内的守卫
1.beforeRouteEnter () // 进入该组件之前要去进行的逻辑操作, 2.beforeRouteLeave() // 离开该组件之前要去进行的逻辑操作(可清除定时器等耗用内存的变量, ...
- Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解
Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...
- Vue路由守卫之组件内路由守卫
beforeRouteEnter,进入路由前.需要注意这里不能使用this,因为我们使用的是进入路由之前,那会组件还没创建,得不到this这个属性,所有我们只能使用过vm异步语句来让 ...
- vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)
1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...
- vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)
模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS:让自己的控件动起来
代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...
- [Flex] ButtonBar系列——arrowKeysWrapFocus属性如果为 true,则使用箭头键在组件内导航时,如果击中某一端则将折回。
<?xml version="1.0" encoding="utf-8"?> <!--arrowKeysWrapFocus 如果为 true, ...
随机推荐
- Sql Server数据库之多表查询
一.连接查询 概念:根据两个表或多个表的列之间的关系,从这些表中查询数据 目的:实现多表查询操作 语法:From join_table join_type join_table[ON(join_con ...
- 2017-11-11 Sa Oct 消参
2017-11-11 Sa Oct 消参 Prior versions: 2017-11-04 Sa Oct 消参 2017-11-10 Fr Oct 消参 2017-11-04 Sa $ P(-3, ...
- Pycharm配置支持vue语法
1. 2. 3. 4. 5.
- 《CSAPP》读书笔记
第一章 第二章 第三章 第四章 第五章 第六章 第七章 链接 可重定位目标文件 符号和符号表 符号解析 第八章 第九章 虚拟存储器 虚拟存储器 页表.页命中.缺页 地址翻译 第十章 第十一章 第十二章 ...
- <a>超链接用作下载
在a标签里添加 download="" ,“ ”里面的内容可随意写,比如文件名. <a href="/download/武林秘籍.pdf" downl ...
- python测试开发django-1.开始hello world!
前言 当你想走上测试开发之路,用python开发出一个web页面的时候,需要找一个支持python语言的web框架.django框架有丰富的文档和学习资料,也是非常成熟的web开发框架,想学pytho ...
- win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误。并非所有的功能被成功更改。
win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误.并非所有的功能被成功更改. 从安装成功的电脑上拷贝ghost版本缺少的文件,然后再安装telnet客户端,我已打包 链接: ...
- 动态在线扩容root根分区大小的方法详解
前言 本文主要介绍了关于动态在线扩容root根分区大小的相关内容,分享出来供大家参考学习,下面话不都说了,来一起看看详细的介绍吧. ? 1 qemu-img resize yourname.img + ...
- java中mysql查询报错java.sql.SQLException: Before start of result set
异常:java.sql.SQLException: Before start of result set 解决方法:使用rs.getString();前一定要加上rs.next(); sm = con ...
- TZOJ 2392 Bounding box(正n边形三点求最小矩形覆盖面积)
描述 The Archeologists of the Current Millenium (ACM) now and then discover ancient artifacts located ...