使用场景:

  组件复用;路由跳转;

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. php文件上传客户端限制和服务器端限制

    客户端限制 1,通过表单隐藏域限制文件上传文件的最大值<input type='hidden' name='MAX_FILE_SIZE' VALUE='字节数' />通过accept属性限 ...

  2. 32、出任爬虫公司CEO(爬取职友网招聘信息)

    职友集,搜索到全国上百家招聘网站的最新职位.   https://www.jobui.com/rank/company/   打开网址后,你会发现:这是职友集网站的地区企业排行榜,里面含有     本 ...

  3. qt tableview里面添加控件

    在QStyledItemDelegate的paint方法里面 void MyItemModelDeletage::paint(QPainter *painter, const QStyleOption ...

  4. html元素标签时间格式化

    <fmt:formatDate value="${user.loginTime}" pattern="yyyy-MM-dd HH:mm:ss"/>

  5. 解决 "Could not autowire. No beans of 'SationMapper' type found" 的问题

    网上查找的方法,附上原文链接:https://blog.csdn.net/Coder_Knight/article/details/83999139 方法1:在mapper文件上加@Repositor ...

  6. PHP之常用第三方库

    汇总常用的第三方库,方便快速进行开发,避免重复造轮子 1. 时间相关 nesbot/carbon(在编写 PHP 应用时经常需要处理日期和时间,使用Carbon 会很方便– 继承自 PHPDateTi ...

  7. 简单了解 node http(一)

    简单了解 node http 模块 文章记录了对http 模块的简单使用与理解. http 服务端 http 客户端 总结 1. http 服务端 先写个小例子 服务端: let http = req ...

  8. 更新 | 2019年9月计算机二级office模拟题库

    随着2019年上半年计算机二级考试的完美落幕,紧接着的便是9月份的考试了. 到目前为止,下半年9月份计算机二级考试报名开通时间在6月前后,现在也基本结束. 2019年9月(56次)全国计算机等级考试( ...

  9. Docker下载镜像出现failed to register layer: symlink....问题

    在用Docker下载RabbitMQ的时候出现如下问题 个人解决方案:重启Docker. 若重启还是无法解决问题,可以先关闭Docker systemctl stop docker 然后把已下载的相关 ...

  10. Hibernate 最简单实例

    我从网上下载了 hibernate-release-4.3.0.Final.zip,解压缩,把/lib/required文件夹下的所有jar包加入到eclipse项目中的Referenced Libr ...