一个坑: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的更多相关文章

  1. 解决vue组件内前置路由守卫beforeRouteEnter无法获取上下文this

    问题描述 vue框架,只有在报名页面报名成功,然后自动跳转到订单详情,才弹出一个引流弹窗,其他情况均不弹出,我就想到使用vue 的组件内前置守卫beforeRouteEnter来实现.beforeRo ...

  2. vue组件路由守卫钩子函数(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

    用法:与mounted,created等同级并列. export default { data() { return { } }, methods: { go() { this.$router.pus ...

  3. vue 组件内的守卫

    1.beforeRouteEnter ()  // 进入该组件之前要去进行的逻辑操作, 2.beforeRouteLeave() // 离开该组件之前要去进行的逻辑操作(可清除定时器等耗用内存的变量, ...

  4. Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

    Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...

  5. Vue路由守卫之组件内路由守卫

    ​        beforeRouteEnter,进入路由前.需要注意这里不能使用this,因为我们使用的是进入路由之前,那会组件还没创建,得不到this这个属性,所有我们只能使用过vm异步语句来让 ...

  6. vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

    1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...

  7. vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)

    模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...

  8. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS:让自己的控件动起来

    代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...

  9. [Flex] ButtonBar系列——arrowKeysWrapFocus属性如果为 true,则使用箭头键在组件内导航时,如果击中某一端则将折回。

    <?xml version="1.0" encoding="utf-8"?> <!--arrowKeysWrapFocus 如果为 true, ...

随机推荐

  1. python day07笔记总结

    2019.4.4 S21  day07笔记总结 一.深浅拷贝 1.copy.copy()     浅拷贝 deep.copy()    深拷贝 2.一般情况 1.str/int/bool 是不可变类型 ...

  2. 使用其他分支替换master分支

    在提交混乱的时候, 导致master分支和远程仓库完全一致的时候,这时候解决这种问题可以创建一个新的分支, 再合并到master分支, 像这样: git checkout seotweaks git ...

  3. 第一次C语言程序设计

    C语言程序实验报告 实验项目: 1.字符与ASCII码 2.运算符与表达式的应用 3.顺序结构应用程序 4.数学函数的算法描述 5.鸡兔同笼的算法描述 6.确定坐标的算法描述 姓名:张时锋 实验地点: ...

  4. 什么是云?Iaas,Paas和SaaS

    周围的朋友听说我是做云相关的,总是爱问啥是云?别不是虚幻的概念吧.云计算当然不是虚幻的概念,“云”其实是互联网的一个隐喻,简单地说,云计算是通过Internet(“云”)交付计算服务——服务器.存储. ...

  5. pl/sql developer 问题总结

    问题1,出现NLS_LANG和字符集(Character set)问题 安装完PL/SQL后打开,遇到如图问题. 原因:这是因为系统没有设置NLS_LANG系统变量. 解决方法:有两种方式查看. 1. ...

  6. Nancy.Net之旅-探索模块

    探索Nancy模块 模块是任何Nancy应用程序中的主角,因为它是您定义应用程序行为的地方,所以无法避免使用它. 事实上,在任何的Nancy应用程序中,声明模块是最基本的要求. 通过继承NancyMo ...

  7. Servlet第二篇(介绍、ServletConfig;ServletContext)

    什么是Serlvet? Servlet其实就是一个遵循Servlet开发的java类.Serlvet是由服务器调用的,运行在服务器端. 为什么要用到Serlvet? 我们编写java程序想要在网上实现 ...

  8. linux之egrep命令

    1.介绍 egrep工具是grep工具的扩展,相当于grep -E 2.用法 查找1个或1个以上前面的字符为例 查找0个或1个前面字符 egrep 'o?' 1.txt 匹配roo或者body egr ...

  9. web前端面试题题目

    一.各种浏览器兼容的前缀:-o-(Opera),-ms-(IE): -moz-(火狐):-webkit-(chrome) 二.存在兼容性的css属性:placeholder,主要是因为各种浏览器pla ...

  10. 20164319 刘蕴哲 Exp2 后门原理与实践

    [后门概念] 后门就是不经过正常认证流程而访问系统的通道. 特指潜伏于操作系统中专门做后门的一个程序,而“坏人”可以连接这个程序远程执行各种指令. (概念和木马有重叠) [学习内容] 使用nc实现wi ...