一个坑: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. SQL Server扩展事件的使用ring_buffer target时“丢失”事件的原因分析以及ring_buffer target潜在的问题

    事情起因: 排查SQL Server上的死锁问题,一开始想到的就是扩展事件, 第一种方案,开profile守株待兔吧,显得太low了,至于profile的变种trace吧,垂垂老矣,也一直没怎么用过. ...

  2. flex-grow,flex-shrink,flex-basis及flex

    flex-grow:默认值0:分配剩余空间的扩张比例: flex-basis:默认值auto:倘若设置了此属性,那么计算剩余空间之前要优先减去此属性,且它的层级比width高,会将width覆盖. 有 ...

  3. Java框架spring 学习笔记(十五):操作MySQL数据库

    新建一个工程,添加对数据库的支持 下载mysql驱动包 mysql-connector-java-5.1.7-bin.jar,快捷键ctrl+alt+shift+s,添加jar包到工程 编写JdbcT ...

  4. 音视频处理概要 markdown

    最近要想办法把录制的音视频进行拼接. 比方说此次录制的视频有三段,通过高清直播编码器录制,录制下的标准为h.264 直接用ffmpeg简单拼接,音频会丢失,所以有了此次解决方案(有可能会繁琐,简单方案 ...

  5. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

  6. Ubuntu 通过apt安装VSCode

    1. sudo vim /etc/apt/sources.list.d/vscode.list 并向里面添加:deb [arch=amd64] http://packages.microsoft.co ...

  7. df命令,du命令,磁盘分区

    df 命令 功能:用来检查linux的文件系统的磁盘空间占用情况 1. df -h 2. 以innode节点数量显示磁盘空间占用情况 df -ih 3. 列出文件系统类型 df -Th du 命令 功 ...

  8. 一篇教你看懂spring bean工厂和aop

    这篇文章为spring回顾总结的第二篇,本篇主要分为两个部分,分别是spring的bean工厂的实现.spring的aop实现原理,这两部分也是面试当中问的比较多的. spring的bean工厂的实现 ...

  9. Centos 7创建一个服务

    首先创建服务文件 vim /etc/systemd/system/node.service #内容如下 [Unit] Description=ethereum-go Monitor Daemon Af ...

  10. unity导入TexturePacker处理

    1.从Asset Store里下载TexturePackerImporter ,然后导入到项目中. 2.导入unity的一张大图和一个.tpsheet文件(注意原始图片也要在相同目录) 3.代码导入 ...