使用场景:

  组件复用;路由跳转;

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的使用的更多相关文章

  1. [Flex] ButtonBar系列——arrowKeysWrapFocus属性如果为 true,则使用箭头键在组件内导航时,如果击中某一端则将折回。

    <?xml version="1.0" encoding="utf-8"?> <!--arrowKeysWrapFocus 如果为 true, ...

  2. Vue(基础八)_导航守卫(组件内的守卫)

    一.前言 主要通过一个例子演示三个钩子的作用: 1.beforeRouteEnter()                                                         ...

  3. vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)

    模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...

  4. Jetpack系列:应用内导航的正确使用方法

    今天小编要分享的还是Android Jetpack库的基本使用方法,本篇介绍的内容是Jetpack Navigation组件,让我们一起学习,为完成年初制定的计划而努力吧! *** 组件介绍 导航,是 ...

  5. 解决vue组件内前置路由守卫beforeRouteEnter无法获取上下文this

    问题描述 vue框架,只有在报名页面报名成功,然后自动跳转到订单详情,才弹出一个引流弹窗,其他情况均不弹出,我就想到使用vue 的组件内前置守卫beforeRouteEnter来实现.beforeRo ...

  6. Nuxt内导航栏的两种实现方式

    方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为i ...

  7. Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航

    在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类Ap ...

  8. Windows Store App JavaScript 开发:页内导航

    页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...

  9. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS:让自己的控件动起来

    代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...

随机推荐

  1. 基于Caffe训练AlexNet模型

    数据集 1.准备数据集 1)下载训练和验证图片 ImageNet官网地址:http://www.image-net.org/signup.php?next=download-images (需用邮箱注 ...

  2. .net 分布式锁

    原文 : 浅解.Net分布式锁的实现   序言 我晚上有在公司多呆会儿的习惯,所以很多晚上我都是最后一个离开公司的.当然也有一些同事,跟我一样喜欢在公司多搞会儿.这篇文章就要从,去年年末一个多搞会的晚 ...

  3. 使用python 实现 微信好友 个性签名 并 制作 词云图

    环境搭建: pip install itchat numpy wordcloud matplotlib jieba 先把上面的几个包安装完成,直接上代码 import itchat from itch ...

  4. call apply bind sleep

    1.自己实现一个call 1)利用对象的方式的形式改变this指针 funcion add; add.call(temObj) 只需要 在temObj对象临时添加一个方法即可 Function.pro ...

  5. Flask开发系列之Flask+redis实现IP代理池

    Flask开发系列之Flask+redis实现IP代理池 代理池的要求 多站抓取,异步检测:多站抓取:指的是我们需要从各大免费的ip代理网站,把他们公开的一些免费代理抓取下来:一步检测指的是:把这些代 ...

  6. 位操作符:&位与、|位或、^异或、~求反、<<左移位、>>带符号右移位、>>>无符号右移位

    . 操作符 名称 实例(例中使用字节) 描述 & 位与 10101110 & 10010010 得到10000010 两个相应位上比特如果都为1,则执行 与 操作会得到1 | 位或 1 ...

  7. Python 安装cx_Oracle模块折腾笔记

    kali linux/ubuntu下安装: 不得不说安装这个模块很蛋疼,决定做个记录. sudo apt install build-essential unzip python-dev libaio ...

  8. 基于zynq XC7Z100 FMC接口通用计算平台 XC7Z100

      一.板卡概述 本板卡基于Xilinx公司的FPGA XC7Z100 FFG 9000 芯片, 该平台为设计和验证应用程序提供了一个完整的开发平台.该平台使设计师能够更加简单进行高性能的原型设计,并 ...

  9. [转载]Ethernet,Half-Duplex/Full-Duplex,CSMA

    原文地址:Ethernet,Half-Duplex/Full-Duplex,CSMA/CD,Auto-Negotiation作者:心田麦浪 CSMA/CD(Carrier Sense Multiple ...

  10. scp 自动带密码参数复制文件到主机

    一.安装sshpass工具 [root@zabbix_server scripts]# yum install sshpass 二.运行 [root@zabbix_server scripts]# s ...