使用场景:

  组件复用;路由跳转;

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. vue中Runtime-Compiler和Runtime-only的区别

    一.选择Runtime-Compiler和Runtime-only不同模式的时候main.js文件的区别    二.vue程序运行过程 1.解析: 第一步,当把vue模板template传给Vue实例 ...

  2. 字典树(trie树) 后缀树 广义后缀树

    转自:http://www.cnblogs.com/dong008259/archive/2011/11/11/2244900.html (1)字典树(Trie树) Trie是个简单但实用的数据结构, ...

  3. day 01 常量 注释 int(整型) 用户交互input 流程控制语句if

    python的编程语言分类(重点) if 3 > 2: 编译型: 将代码一次性全部编译成二进制,然后再执行. 优点:执行效率高. 缺点:开发效率低,不能跨平台. 代表语言:C 解释型: 逐行解释 ...

  4. python 利用 smtplib发邮件

    import smtplib from email.mime.text import MIMEText title = "request build error" content ...

  5. [转载]C / C++ 计算程序运行的时间

    原文链接:https://blog.csdn.net/qq_36667170/article/details/79507547 在学数据结构过程中老师让查看不同算法的运行时间,然后让自己打印运行时间. ...

  6. git 笔记总结

    一 创建版本库 (1) $ mkdir learngit $ cd learngit $ pwd /Users/michael/learngit (2) git init 二 提交文件 git sta ...

  7. 国内高速下载Docker

    一般情况下,我们可以从Docker官网下载docker安装文件,但是官方网站由于众所周知的原因,不是访问慢,就是下载慢.下载docker安装包动不动就要个把小时,真是极大的影响工作效率. 在这里推荐一 ...

  8. 【抓包工具】使用Fiddler关于“由于目标计算机积极拒绝,无法连接。”的解决方案

    今天使用Fiddler的时候遇到下面这个问题:在地址栏想打开个一般处理程序,出现连接本机失败的提示,如下图: 而这在我没打开Fiddler的时候是显示正常的. 查看Fiddler,在嗅探 -> ...

  9. Java 计算两点间的全部路径(一)

    算法要求: 在一个无向连通图中求出两个给定点之间的所有路径: 在所得路径上不能含有环路或重复的点: 算法思想描述: 整理节点间的关系,为每个节点建立一个集合,该集合中保存所有与该节点直接相连的节点(不 ...

  10. Genymotion模拟器使用camera

    1.前言 最近开发react-native的app,上传图片功能需要使用相机,发现Genymotion默认的相机不工作.查看同行的博客解决了,归纳整理一下. 2.步骤 2.1安装Genymotion: ...