组件内守卫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, ...
随机推荐
- python day07笔记总结
2019.4.4 S21 day07笔记总结 一.深浅拷贝 1.copy.copy() 浅拷贝 deep.copy() 深拷贝 2.一般情况 1.str/int/bool 是不可变类型 ...
- 使用其他分支替换master分支
在提交混乱的时候, 导致master分支和远程仓库完全一致的时候,这时候解决这种问题可以创建一个新的分支, 再合并到master分支, 像这样: git checkout seotweaks git ...
- 第一次C语言程序设计
C语言程序实验报告 实验项目: 1.字符与ASCII码 2.运算符与表达式的应用 3.顺序结构应用程序 4.数学函数的算法描述 5.鸡兔同笼的算法描述 6.确定坐标的算法描述 姓名:张时锋 实验地点: ...
- 什么是云?Iaas,Paas和SaaS
周围的朋友听说我是做云相关的,总是爱问啥是云?别不是虚幻的概念吧.云计算当然不是虚幻的概念,“云”其实是互联网的一个隐喻,简单地说,云计算是通过Internet(“云”)交付计算服务——服务器.存储. ...
- pl/sql developer 问题总结
问题1,出现NLS_LANG和字符集(Character set)问题 安装完PL/SQL后打开,遇到如图问题. 原因:这是因为系统没有设置NLS_LANG系统变量. 解决方法:有两种方式查看. 1. ...
- Nancy.Net之旅-探索模块
探索Nancy模块 模块是任何Nancy应用程序中的主角,因为它是您定义应用程序行为的地方,所以无法避免使用它. 事实上,在任何的Nancy应用程序中,声明模块是最基本的要求. 通过继承NancyMo ...
- Servlet第二篇(介绍、ServletConfig;ServletContext)
什么是Serlvet? Servlet其实就是一个遵循Servlet开发的java类.Serlvet是由服务器调用的,运行在服务器端. 为什么要用到Serlvet? 我们编写java程序想要在网上实现 ...
- linux之egrep命令
1.介绍 egrep工具是grep工具的扩展,相当于grep -E 2.用法 查找1个或1个以上前面的字符为例 查找0个或1个前面字符 egrep 'o?' 1.txt 匹配roo或者body egr ...
- web前端面试题题目
一.各种浏览器兼容的前缀:-o-(Opera),-ms-(IE): -moz-(火狐):-webkit-(chrome) 二.存在兼容性的css属性:placeholder,主要是因为各种浏览器pla ...
- 20164319 刘蕴哲 Exp2 后门原理与实践
[后门概念] 后门就是不经过正常认证流程而访问系统的通道. 特指潜伏于操作系统中专门做后门的一个程序,而“坏人”可以连接这个程序远程执行各种指令. (概念和木马有重叠) [学习内容] 使用nc实现wi ...