一个坑: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. 使用==操作符比较命令行参数args[0]和字符串返回“Invalid type"

    运行程序接收一个来自命令行的字符串参数(取值1,2,3,4),根据参数执行对应语句块. 由于未能判断字符串内容是否相同导致代码if语句块代码失效,怎么也看不到schedule方法的效果, 以下是错误代 ...

  2. [原创]如果软件在网络磁盘中或移动磁盘中运行时需要解决 exception C0000006 异常问题

    //如果软件在网络磁盘中或移动磁盘中运行时需要利用下面这句命令来解决 exception C0000006 异常问题 {$SetPEFlags IMAGE_FILE_REMOVABLE_RUN_FRO ...

  3. Linux seq_printf输出内容不完整的问题

    Linux seq_printf输出内容不完整的问题 写在前面的话:这是多年前在项目中遇到的问题,作为博客的开篇之作,有不足之处,请各位大侠斧正!谢谢! seq_file接口介绍 有许多种方法能够实现 ...

  4. Django SCRF跨站点请求伪造

    使用Django发POSTt请求的时候经常会遇到Forbidden的错误,然后直接了当的方法就是去setting里面吧csrf中间件注释掉,其实csrf是django给我们提供的防护措施. CSRF就 ...

  5. 基于django的博客系统

    这是前段代码 达到的效果并不是太好,但我还是要发出来,有更好的建议可以和我讨论 后台还算可以 添加了分类和文章两个功能,还在优化,敬请期待....

  6. event 事件1

    1.事件流 1.1 事件冒泡 IE8- 浏览器支持的事件流是事件冒泡.事件冒泡是事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)的过程. <!doctype html&g ...

  7. Java框架spring 学习笔记(十八):事务管理(xml配置文件管理)

    在Java框架spring 学习笔记(十八):事务操作中,有一个问题: package cn.service; import cn.dao.OrderDao; public class OrderSe ...

  8. 关于处理java.lang.IllegalArgumentException at java.sql.Date.getHours异常

    https://segmentfault.com/a/1190000016937108

  9. Android 添加第三方jar包

    1,拷贝jar包到项目的\app\libs文件夹下. 2,打开项目下的build.gradle(Module:app)文件,在“dependencies {}”中添加“compile files('l ...

  10. 关于感受野 (Receptive field) 你该知道的事

    Receptive field 可中译为“感受野”,是卷积神经网络中非常重要的概念之一. 我个人最早看到这个词的描述是在 2012 年 Krizhevsky 的 paper 中就有提到过,当时是各种不 ...