使用场景:

  组件复用;路由跳转;

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. 初步学习jquery学习笔记(五)

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

  2. 优雅的用两种方式爬网络 txt 文件【雾

    TXT 文件?? (笑 这里爬的是 74xsw (咱好像也不怎么逛的网站)的英雄再临 ... 请注意这并不是教程,只是贴个代码仅供参考而已[雾 这里 用的 getTXT 的方式有两种,一种是每个章节分 ...

  3. tarjan算法求无向图的桥、边双连通分量并缩点

    // tarjan算法求无向图的桥.边双连通分量并缩点 #include<iostream> #include<cstdio> #include<cstring> ...

  4. NOIP2017 时间复杂度 大模拟

    再写一道大模拟题. 由于是限时写的,相当于考场代码,乱的一批. 题目链接:P3952 时间复杂度 先记几个教训: 字符串形式的数字比较大小老老实实写函数,字典序都搞错几次了 栈空的时候不但pop()会 ...

  5. Freemarker模板的使用简介

    需要的jar包: 在pom.xml文件中贴入 <dependency> <groupId>junit</groupId> <artifactId>jun ...

  6. Linux Firewalld 简明介绍

    防火墙作为保护服务器不受外部网络流量影响的一种方式.可以让用户定义一系列规则来控制外部网络中流入的流量,从而达到允许或阻塞的效果.firewalld 是防火墙服务的一个守护程序,实现了动态修改拥有 D ...

  7. git 计算commit

    转自:https://www.cnblogs.com/jwentest/p/8186712.html#!/bin/bash f1="$1*" f2="$2*" ...

  8. 关于一个function abc() 内 return一个值, 或者多个值写法

    1.想return一个值,选第一种写法 function abc(){ a = '我是adad' return a } console.log(abc) // ==> 这个是错的,不要这样写,经 ...

  9. 2019.9.17更换ubuntu的镜像源 ubuntu安装lamp iis安装网站和ftp站

    更换ubuntu的镜像源 /etc/apt/sources.list cp  /etc/apt/sources.list  /etc/apt/sources.list.bak 备份这个文件 vim / ...

  10. SIP协议 会话发起协议(一)

    会话发起协议(SIP)是VoIP技术中最常用的协议之一.它是一种应用层协议,与其他应用层协议协同工作,通过Internet控制多媒体通信会话. SIP - 概述 以下是有关SIP的几点注意事项 - S ...