一个坑: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学习Day6 元组、字典、集合set三类数据用法、深浅拷贝

    一.深浅拷贝 1.  值拷贝 ls1 = ls2  不开辟空间,指针跟着走.(直接将ls1中存放的地址拿过来,内存中不会开辟新的空间,所以你怎么变,我也跟着变.)(ls1内部的所有类型的值发生改变,l ...

  2. 浅谈Spring

    参考文章: https://www.ibm.com/developerworks/cn/java/j-lo-spring-principle/ 参考书籍: <SPRING技术内幕:深入解析SPR ...

  3. c语言:第一次作业,分支,顺序结构

    1.本章学习总结(2分) 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 学了几节课的c语言了,因为没自学的原因,跟不上进度.对于c语言现在挺有兴趣的,愿意去花时间去弥补 ...

  4. Python复杂场景下字符串处理相关问题与解决技巧

      1.如何拆分含有多种分隔符的字符串¶ ''' 实际案例: 我们要把某个字符串依据分隔符号拆分不同的字段,该字符串包含多种不同的分隔符,例如: s=’ab;cd|efg|hi,jkl|mn\topq ...

  5. springboot+maven多模块工程dependency not found

    参见:https://blog.csdn.net/m0_37943753/article/details/81031319. 重点是<dependencyManagement>标签的作用, ...

  6. linux命令总结----转载

    1.终端是个奇妙的东西,一开始它的低颜值,高难度可能会令我们灰心气馁. 但是入门之后,你会发现终端命令行是如此强大,简直飞一般的感觉.就是这个feel,倍儿爽~ 享受“弹指间,一切尽在掌握”的感觉. ...

  7. mysql学习笔记--数据库视图

    一.视图 1. 概念 a. 视图是一张虚拟表,它表示一张表的部分或多张表的综合的结构 b. 视图仅仅是表结构,没有数据.视图的结构和数据建立在表的基础上 2. 创建视图 a. 语法: create [ ...

  8. Android 保存图片到相册

    /** * 保存图片到相册 */ public void saveImageToGallery(Bitmap mBitmap) { if (!Environment.getExternalStorag ...

  9. Shell中sed----学习

    sed原理及使用 目录 前言 一.简介 二.处理流程 三.命令选项options 四.pattern 1. 模式空间 2. 模式空间的转换 3. 地址匹配 五.procedure 1. 替换命令: s ...

  10. 分析abex-crackme#1

    1.分析环境2.运行程序,了解大致的运行过程3.运行Ollydbg调试程序3.1.分析结果简述4.破解4.1.方法一4.2.方法二5.运行结果6.与书中不同之处 1.分析环境 操作系统:Win10 1 ...