组件内守卫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, ...
随机推荐
- php解决高并发问题
我们通常衡量一个Web系统的吞吐率的指标是QPS(Query Per Second,每秒处理请求数),解决每秒数万次的高并发场景,这个指标非常关键.举个例子,我们假设处理一个业务请求平均响应时间为10 ...
- JavaScript Array some() 方法
some 判断数组中是否至少有一个元素满足条件 只要有一个满足就返回true 只有都不满足时才返回false 语法: array.some(function(value,index,array),th ...
- std::condition_variable::wait_until segment
原因是使用了 -static 改为 -static-libstdc++ -static-libgcc
- RabbitMQ安装及使用
下载 由于RabbitMQ是基于Erlang语言开发,所以在安装RabbitMQ之前,需要先安装Erlang.好在RabbitMQ官网已经为我们提供了Erlang的安装包 Erlang下载地址:htt ...
- ADDED、ADDED_TO_STAGE、REMOVED、REMOVED_FROM_STAGE这几个事件的区别
var _container:Sprite = new Sprite(); _container.addEventListener(Event.ADDED,onAdded); _container.a ...
- iis网站部署常见错误
sqlserver 授权登录名没有db_owner权限 数据库连接字符串端口没开,连接形式:192.168.0.1,1433
- midi文件格式
百度百科的midi文件格式写的非常详细,点个赞.这里备份一下,方便日后查看. midi文件由midi头和音轨组成,midi头中的信息包括midi头标志,音轨数量,音轨的演奏方式(并行/拼接等),4分音 ...
- Celery 1
Celery是一个用Python开发的异步的分布式任务调度模块 Celery有以下优点: 简单:一但熟悉了celery的工作流程后,配置和使用还是比较简单的 高可用:当任务执行失败或执行过程中发生连接 ...
- 在Laravel项目中遇到的一些问题
1. 控制器名字要跟控制器类名保持一致(当保存某个版本的文件时,我通常喜欢复制一份并重命名,这时候重命名的文件的类名并没有改变,着往往回影响结果,却一直找不出错在哪里),在备份的时候应该新建一个文件夹 ...
- huawei USG防火墙子接口技术的应用案例
网络拓扑: 在中小企业的办公网络的设计中,通常为了安全考虑,需要将不同部门之间的互访的流量经过防火墙中转,同时结合vpn stance将业务进行隔离,在本例中,使用两台USG防火墙做HA作为整个办公网 ...