组件内守卫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, ...
随机推荐
- JS stacktrace(Node内存溢出)
vscode运行项目时,保存.vue文件,项目突然终止运行.输入命令npm run dev重新运行后,终端显示下面的错误. 解决方案: 如果是run dev时报错,在package.json文件里的s ...
- myeclise2017安装包及破解文件
亲测可用! myeclipse2017安装包 链接:https://pan.baidu.com/s/13R1wk7mI9ECjEByanIbHDA 提取码:vaeb myeclipse2017破解包 ...
- CS通用项目系统搭建——三层架构第二天
一.编写配置文件 首先找到编写配置文件的位置.winform会在app.config.webform写在web.config中. <?xml version="1.0" en ...
- es curl 访问
1. curl -u elastic:mypass -X GET "localhost:9200/my_index/_search?pretty" 相关链接:https://www ...
- 一.C#基础:标识符和关键字
只要语言就会有标识符,和关键字的概念,以下是C#的标识符与关键字: 一个字符串要成为标识符要满足的条件1:只包含字母,(包括大小写),数字,@符号,下划线——.2:首位可以是字母,@,但一定不能是数字 ...
- pandas,对dataFrame中某一个列的数据进行处理
背景:dataFrame的数据,想对某一个列做逻辑处理,生成新的列,或覆盖原有列的值 下面例子中的df均为pandas.DataFrame()的数据 1.增加新列,或更改某列的值 df[&qu ...
- AHB协议整理 AMBA
本文对AHB协议作了简单整理,整理自两篇文章: AHB总线协议 AHB重点难点总结 1. 简介 AHB总线规范是AMBA总线规范的一部分,AMBA总线规范是ARM公司提出的总线规范,被大多数SoC设计 ...
- 报错:APP has stopped
由于在 /MyActivity/AndroidManifest.xml 中把activity的类名打错,而导致程序加载后即出错. 而输错启动程序的类名并不会引起报错,因此这个应该引起注意.
- 这是一个新的开始at this very monment
简单的介绍下此时自己的情况,和对近几年所做的事做一个总结,并展望下自己的未来和对自己的期待.我会将我的博客分成两种,一个是我的学习笔记,另一个是我的生活记录. 2018年六月底我毕业于一个普通的二本, ...
- Python学习笔记1环境搭建
1.在浏览器输入https://www.python.org/psf/,点击download下载python3.7.2(https://www.python.org/) https://www.p ...