使用场景:

  组件复用;路由跳转;

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. [洛谷P4183][USACO18JAN]Cow at Large P

    题目链接 Bzoj崩了之后在洛谷偶然找到的点分好题! 在暴力的角度来说,如果我们$O(n)$枚举根节点,有没有办法在$O(n)$的时间内找到答案呢? 此时如果用树形$dp$的想法,发现是可做的,因为可 ...

  2. C++中多态的概念和意义

    1,函数重写回顾: 1,父类中被重写的函数依然会继承给子类: 2,子类中重写的函数将覆盖父类中的函数: 1,重写父类当中提供的函数是因为父类当中提供的这个函数版本不能满足我们的需求,因此我们要重写: ...

  3. postgresql 用 like 可以 复制结构包括主键约束

    create tabletablename ( like tablename INCLUDING INDEXES INCLUDING COMMENTS); PostgreSQL 动态表复制(CREAT ...

  4. [LeetCode] 227. 基本计算器 II

    题目链接: https://leetcode-cn.com/problems/basic-calculator-ii 难度:中等 通过率:33.2% 题目描述: 实现一个基本的计算器来计算一个简单的字 ...

  5. python——元组方法及字符串方法

    元组方法 Tup.count():计算元组中指定元素出现的次数 Tup.count('c') Tup.index():在元组中从左到右查找指定元素,找到第一个就返回该元素的索引值 Tup.index( ...

  6. VeryNginx中文文档

    VeryNginx VeryNginx 是一个功能强大而对人类友好的 Nginx 扩展程序. 提示 v0.2` 版本之后,控制台入口被移动到了 `/verynginx/index.html 中文控制台 ...

  7. 解决Asp.Net core 控制台出现乱码的情况

    将控制台的编码页修改成Unicode,在运行程序或者在程序里加一行Console.OutputEncoding = Encoding.Unicode; Console.OutputEncoding = ...

  8. IDEA的快捷方式

    一,IDEA的快捷方式1,F8单步执行 2,F9运行调试 3,CTRL +鼠标左键=进入查看定义 4,CTRL+alt +鼠标左键=查看实现 5,Shift+F6重命名 6,alt +intsert= ...

  9. CodeReview的一些原则

    架构/设计/常规角度: 单一职责原则 一个类只能干一个事情,一个方法最好也只干一件事情.一个类既干UI的事情,又干逻辑的事情,这个在低质量的代码里是很常见. 行为是否统一 缓存是否统一 错误处理是否统 ...

  10. super、this关键字

    super调用(父类) 调用方法   语法: super.父类方法名(形参列表);        可以在子类方法和构造器中使用,调用父类被覆盖的方法. 实例变量 语法: super.父类实例变量名;  ...