“约见”面试官系列之常见面试题之第九十九篇之router的钩子函数(建议收藏)

当使用路由参数时,例如从 /user/aside导航到 /user/foo,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则更加高效。不过,这也意味着组件的生命周期钩子不会再被调用

注意:

(1)从同一个组件跳转到同一个组件。

(2)生命周期钩子created和mounted都不会调用。

可以使用router的组件内钩子函数

beforeRouteUpdate(to,from,next){

//在这个钩子函数中:to表示将要跳转的路由对象,from表示从哪个路由跳转过来,next多数就是需要调用

//created和mounted不调用,无法拿到需要的动态值,就通过to.path,to.params等

//可以在这个函数中打印to,具体看to对象有什么可以使用的属性

}

添加watch监听

watch: {// 方法1 //监听路由是否变化'$route' (to, from) {if(to.query.id !== from.query.id){this.id = to.query.id;this.init();//重新加载数据}}}//方法 2 设置路径变化时的处理函数watch: {'$route': {handler: 'init',immediate: true}}

为了实现这样的效果可以给router-view添加一个不同的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。

<router-view :key="$route.fullpath"></router-view>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416756.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu18虚拟机添加网卡后,不自动启用dhcp

使用命令ifconfig查看&#xff0c;没有这个新网卡 使用命令ifconfig -a 查看有这个新网卡&#xff0c;叫enp0s 接下来修改网卡配置&#xff0c;启用该网卡的dhcp sudo vi /etc/netplan/50-cloud-init.yaml 注意&#xff1a;ubuntu18采用netplan进行网络配置管理&#xff0c;…

“约见”面试官系列之常见面试题之第九十八篇之vue-router有哪几种导航钩子(建议收藏)

目录 1.导航钩子的作用 2.导航钩子的分类 3.全局守卫 4.路由独享守卫 5.局部守卫 6.路由跳转导航解析流程&#xff0c;当由A路由–>B路由的时候 1.导航钩子的作用 vue-router提供的导航钩子主要用来拦截导航&#xff0c;让它完成跳转或取消。 2.导航钩子的分类 全局守…

STL浅析——序列式容器vector的数据结构

vecotr 一词原来的意思是&#xff1a;矢量&#xff0c;向量&#xff0c;航向&#xff0c;顾名思义指的就是类似于数组的一个存储数据的序列&#xff0c;因此所采用的数据结构非常简单&#xff1a;连续的线性空间&#xff0c;它以两个迭代器 _M_start 和 _M_finish 分别指向配置…

Spring Boot SchedulingConfigurer定时执行任务(配置式反射调用)

目录 1.背景 2.简介 3.代码实现 3.1.主类 3.2.配置类 3.3.配置示例 1.背景 定时任务注解Scheduled(cron"0 0/10 * * * ?")大家都会用&#xff0c;但是一旦需要配置时间&#xff0c;这种方式就不可行了&#xff0c;本文介绍了可以配置的方式。 2.简介 本文…

“约见”面试官系列之常见面试题之第九十九篇之router和route(建议收藏)

1.router是VueRouter的一个对象&#xff0c;通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象&#xff0c;这个对象中是一个全局的对象&#xff0c;他包含了所有的路由包含了许多关键的对象和属性。 举例&#xff1a;history对象 $router.push({path:home…

SQLServer数据库,表内存,实例名分析SQL语句

--数据库内存分析 USE master go DECLARE insSize TABLE(dbName sysname,checkTime VARCHAR(19),dbSize VARCHAR(50),logSize VARCHAR(50)) INSERT INTO insSize ( dbName, checkTime, dbSize, logSize ) EXEC sp_msforeachdb select ? dbName,CONVERT(VARCHAR(19),GETDATE(),…

centos nodejs yarn安装及升级

/安装nodejs yum install epel-release yum install nodejs //安装yarn curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo #curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - sudo yum in…

“约见”面试官系列之常见面试题之第一百篇之响应路由参数的变化(建议收藏)

当使用路由参数时&#xff0c;例如从 /user/aside导航到 /user/foo&#xff0c;原来的组件实例会被复用。因为两个路由都渲染同个组件&#xff0c;比起销毁再创建&#xff0c;复用则更加高效。不过&#xff0c;这也意味着组件的生命周期钩子不会再被调用。 注意: &#xff08…

初学者最常问的几个问题

隔行如隔山&#xff0c;初学编程往往不知道从何入手&#xff0c;非常迷茫&#xff0c;以下几个问题是我经常被问到的&#xff0c;总结出来分享给读者。 1) 多久能学会编程? 这是一个没有答案的问题。每个人投入的时间、学习效率和基础都不一样。如果你每天都拿出大把的时间来学…

centos中nodejs npm环境完全删除

使用n升级失败&#xff0c;npm命令直接报错 yum remove nodejs npm -y cd /usr/local/bin 删除 node 的可执行文件和npm 删除: rm -rf /root/.npm rm -rf /usr/local/n

js封装正则验证

//根据不同的验证内容&#xff0c;返回相应的正则表达式 function returnRegString(regName) { if (regName "email") { return "^([a-zA-Z0-9_\.\-])\(([a-zA-Z0-9\-])\.)([a-zA-Z0-9]{2,4})$"; //邮箱 } else if (regName "tel") { return &…

“约见”面试官系列之常见面试题之第一百零一篇之vue-router传参(建议收藏)

vue-router传递参数分为两大类 编程式的导航 router.push声明式的导航 <router-link> 编程式的导航 router.push 编程式导航传递参数有两种类型&#xff1a;字符串、对象。 字符串 字符串的方式是直接将路由地址以字符串的方式来跳转&#xff0c;这种方式很简单但是不…

mac os域名解析处理 清缓存 映射

清理dns缓存 手动清理dns缓存&#xff0c;Mac OS X系统中我们可以在系统中直接在命令行窗口&#xff08;terminal&#xff09;输入命令lookupd -flushcache或type dscacheutil -flushcache清空刷新dns 解析缓存 修改hosts文件 sudo vi /etc/hosts

“约见”面试官系列之常见面试题之第一百零二篇之vue-router的两种模式(建议收藏)

众所周知&#xff0c;vue-router有两种模式&#xff0c;hash模式和history模式&#xff0c;这里来谈谈两者的区别。 hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: 上面的代码可以通过改变hash来改变页面字体颜色&#xff0c;虽然没什么用…

Ubuntu热键控制spotify播放和音量调节

安装xbindkeys sudo apt-get install xbindkeys 新建配置文件 xbindkeys -d > ~/.xbindkeysrc 编辑热键 vim ~/.xbindkeysrc 添加以下命令 "dbus-send --print-reply --destorg.mpris.MediaPlayer2.spotify /org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Pla…

python3 venv 虚拟环境使用

目录 1.背景 2.创建虚拟环境 3.目录结构 4.pip安装 5.环境使用 1.背景 很多应用、开源软件都是python写的&#xff0c;各自有各自的软件包和版本依赖&#xff0c;有事可能会有所冲突&#xff0c;为了避免这个冲突&#xff0c;建议采用venv虚拟环境。 本文讲解venv虚拟环…

“约见”面试官系列之常见面试题之第一百零三篇之vue-router实现路由懒加载(建议收藏)

vue异步组件es提案的import()webpack的require,ensure()vue异步组件技术 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ {path: /home,name: home,component: resolve > requir…

olive videoeditor开源跨平台视频编辑器

目录 简介 官网 使用 简介 olive是开源的视频编辑软件&#xff0c;目前下载版本为Alpha版&#xff0c;但已基本可用。 本文讲解添加图片、特效及文字&#xff0c;最后导出视频的简单过程。 官网 Olive - Professional Open-Source Video Editor 下载地址 Olive - Profes…

jQuery自定义动画

<!DOCTYPE html><html lang"en"><head> <meta charset"UTF-8"> <title>jQuery自定义动画</title> <script src"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> …

CentOS7 Ambari2.7.5编译

目录 1.前言 2.编译环境安装 3.下载源码编译 4.大包提前下载 5.报错处理 5.1.报错 5.2.报错 5.3.报错 5.4.报错 5.5.报错 5.6.报错 5.7.报错 6.编译成功 7.官方说明 1.前言 本文讲解了在纯净CentOS7环境下&#xff0c;编译Ambari2.7.5所需进行的一系列操作及异常…