组件内守卫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 2016 在Windows Server 2012 R2 上的初步安装与远程连接实战(一):初步配置
1.安装过程没有什么说头 2.下载并安装SSMS(SQLServer Management Studio),目前已更新到2017.1 3.使用SSMS登陆数据库 第一次选择Windows 身份验证,可 ...
- Oracle使用学习笔记(二)_Sql语句
一.Sql语句的分类 数据操作语言,简称DML(data manipulation language),如增加,删除,修改,查询数据等 数据定义语言,简称DDL(data defination lan ...
- True和数字相加的结果
num = 5 print(num + True) # 其结果为6
- ARTS打卡计划第二周-Tips-mysql-binlog-connector-java的使用
最近发现一个挺不错的框架mysql-binlog-connector-java,可以实时监控binlog的变化. 首先检查mysql的binlog是否开启,在开启的情况下: 引入依赖 <depe ...
- SpringCloud-day04-Eureka高可用集群配置
5.4Eureka高可用集群配置 在高并发的情况下一个注册中心难以满足,因此一般需要集群配置多台. 我们再新建两个module microservice-eureka-server-2002, m ...
- Mongodb 的ORM框架 Morphia之注解
@Entity("bands") public class Band { @Id ObjectId id; String name; String genre; @Referenc ...
- Sprite/MovieClip的Enter_Frame事件,不受addChild/removeChild影响
简单点讲:Sprite或MovieClip对象一旦为其添加了Enter_Frame事件监听,对应的Enter_Frame处理函数将会马上被调用,并一直执行下去(不管你是否将其addChild到显示列表 ...
- 微信小程序-遍历列表
#index.js data: { "messg":"helloworld1111", "items":[ {"name" ...
- Linux 进程同步和通信
为了同步进程所以需要进程通信 管道(有名:文件形式存在,无名:仅限于父子进程间通信) 消息队列 信号量 共享存储 套接字(可用于不同机器)
- MySQL8.0.15安装教程(Windows)
下载 第一步 去官网下载社区版本(GPL版本) 第二步 不登录,直接选下方的跳过 下载解压后 配置系统环境变量 复制解压后的mysql到C盘或者其他磁盘下 我们去系统的环境变量的path里添加一个my ...