组件内导航之beforeRouteUpdate的使用
使用场景:
组件复用;路由跳转;
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
export default{
data(){
return {}
},
beforeRouteUpdate(to,from,next){
console.log(to,from,next)
if(to.fullPath!=from.fullPath){
next()
this.changeUser()
}
},
methods:{
changeUser(){
getUserBaseInfo({userId:this.$route.params.id}).then(res=>{
if(res.success){
this.stuInfo = res.data;
}else{
this.$message.error(res.message)
}
})
}
}
}
组件内导航之beforeRouteUpdate的使用的更多相关文章
- [Flex] ButtonBar系列——arrowKeysWrapFocus属性如果为 true,则使用箭头键在组件内导航时,如果击中某一端则将折回。
<?xml version="1.0" encoding="utf-8"?> <!--arrowKeysWrapFocus 如果为 true, ...
- Vue(基础八)_导航守卫(组件内的守卫)
一.前言 主要通过一个例子演示三个钩子的作用: 1.beforeRouteEnter() ...
- vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)
模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...
- Jetpack系列:应用内导航的正确使用方法
今天小编要分享的还是Android Jetpack库的基本使用方法,本篇介绍的内容是Jetpack Navigation组件,让我们一起学习,为完成年初制定的计划而努力吧! *** 组件介绍 导航,是 ...
- 解决vue组件内前置路由守卫beforeRouteEnter无法获取上下文this
问题描述 vue框架,只有在报名页面报名成功,然后自动跳转到订单详情,才弹出一个引流弹窗,其他情况均不弹出,我就想到使用vue 的组件内前置守卫beforeRouteEnter来实现.beforeRo ...
- Nuxt内导航栏的两种实现方式
方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为i ...
- Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航
在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类Ap ...
- Windows Store App JavaScript 开发:页内导航
页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS:让自己的控件动起来
代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...
随机推荐
- 基于Caffe训练AlexNet模型
数据集 1.准备数据集 1)下载训练和验证图片 ImageNet官网地址:http://www.image-net.org/signup.php?next=download-images (需用邮箱注 ...
- .net 分布式锁
原文 : 浅解.Net分布式锁的实现 序言 我晚上有在公司多呆会儿的习惯,所以很多晚上我都是最后一个离开公司的.当然也有一些同事,跟我一样喜欢在公司多搞会儿.这篇文章就要从,去年年末一个多搞会的晚 ...
- 使用python 实现 微信好友 个性签名 并 制作 词云图
环境搭建: pip install itchat numpy wordcloud matplotlib jieba 先把上面的几个包安装完成,直接上代码 import itchat from itch ...
- call apply bind sleep
1.自己实现一个call 1)利用对象的方式的形式改变this指针 funcion add; add.call(temObj) 只需要 在temObj对象临时添加一个方法即可 Function.pro ...
- Flask开发系列之Flask+redis实现IP代理池
Flask开发系列之Flask+redis实现IP代理池 代理池的要求 多站抓取,异步检测:多站抓取:指的是我们需要从各大免费的ip代理网站,把他们公开的一些免费代理抓取下来:一步检测指的是:把这些代 ...
- 位操作符:&位与、|位或、^异或、~求反、<<左移位、>>带符号右移位、>>>无符号右移位
. 操作符 名称 实例(例中使用字节) 描述 & 位与 10101110 & 10010010 得到10000010 两个相应位上比特如果都为1,则执行 与 操作会得到1 | 位或 1 ...
- Python 安装cx_Oracle模块折腾笔记
kali linux/ubuntu下安装: 不得不说安装这个模块很蛋疼,决定做个记录. sudo apt install build-essential unzip python-dev libaio ...
- 基于zynq XC7Z100 FMC接口通用计算平台 XC7Z100
一.板卡概述 本板卡基于Xilinx公司的FPGA XC7Z100 FFG 9000 芯片, 该平台为设计和验证应用程序提供了一个完整的开发平台.该平台使设计师能够更加简单进行高性能的原型设计,并 ...
- [转载]Ethernet,Half-Duplex/Full-Duplex,CSMA
原文地址:Ethernet,Half-Duplex/Full-Duplex,CSMA/CD,Auto-Negotiation作者:心田麦浪 CSMA/CD(Carrier Sense Multiple ...
- scp 自动带密码参数复制文件到主机
一.安装sshpass工具 [root@zabbix_server scripts]# yum install sshpass 二.运行 [root@zabbix_server scripts]# s ...