vue-router 响应路由参数的变化

提醒一下,当使用路由参数时,例如从 

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

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) 

$route
 对象

const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}

或者:

 

const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
  }
}

 

 

 

注意是:

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

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


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

无废话WPF系列5:控件派生图

1. WPF类控件的派生关系图,紫色的部分开始才算是进入WPF的框架里。 2. WPF控件图 WPF的UI控件主要有以下类型,ContentControl, HeaderedContentControl, ItemsControl, HeaderedItemsControl, Panel, Adorner(文字点缀元素), Flow Text(流式文本元素), T…

安装ipython和jupyter

本节内容; 安装ipython安装jupyterPycharm介绍 Python软件包管理一、安装ipython 1. python的交互式环境2. 安装ipython 可以使用pip命令安装。如果你是用pyenv安装的python的话,pip命令已经有了。 当需要安装包的时候,最好进入虚拟环境&…

vue 图片资源应该如何存放并引入(public、assets)?

全局cli配置:vue.config.js 之前写项目就想着怎么简单怎么来,图片要用了,就直接在要用图片的页面,新建一个跟页面同等级的 imgs 文件夹,然后在页面中直接 “./imgs/图片.png”,不得不说这样写很方便。 但是…

真正的动态声明性组件

在这篇简短的文章中,我将重点介绍ADF动态声明性组件。 我的意思是一个众所周知的ADF标签af:declarativeComponent 。 它可以用作将页面设计为页面片段和组件组成的一种非常便捷的方法。 例如,我们的页面可以包含以下代码片段: &l…

layui 树形组件下拉框

采用 layui 树形组件,版本:V2.6.8。只需要更新layui版本,不需要下载tableSelect。 原作者博客:https://blog.csdn.net/m0_67402588/article/details/123526860。 从 官网 更新日志可以看到,树形组件在2.5.7版本还在更新…

访问修饰符(C# 编程指南)

所有类型和类型成员都具有可访问性级别,用来控制是否可以在您程序集的其他代码中或其他程序集中使用它们。您在声明类型或成员时使用以下访问修饰符之一来指定其可访问性: public 同一程序集中的任何其他代码或引用该程序集的其他程序集都可以访问该类型…

vuex Payload 荷载

1、payload payload:有效载荷,即记录有效信息的部分。 通常在传输数据时,为了使数据传输更可靠,要把原始数据分批传输,并且在每一批数据的头和尾都加上一定的辅助信息,比如这一批数据量的大小&#xff0c…

JSP知识总结

day11 JSP入门 1 JSP概述 1.1 什么是JSP JSP(Java Server Pages)是JavaWeb服务器端的动态资源。它与html页面的作用是相同的,显示数据和获取数据。 1.2 JSP的组成 JSP html Java脚本(代码片段) JSP动态标签 2 J…

layui table表格的复选框checkbox设置部分为不可选

需求:如上图,某些数据禁用删除功能,那么全选时,这些数据前面的复选框也不能选。 实现:在layui数据表格中设置了字段为 type:checkbox 但是想要实现部分不显示,不可选的功能。layui内置没有该功能&#xff…

Katas编写的Java教程:Mars Rover

编程kata是一种练习,可以帮助程序员通过练习和重复练习来磨练自己的技能。 本文是“ 通过Katas进行Java教程 ”系列的一部分。 本文假定读者已经具有Java的经验,熟悉单元测试的基础知识,并且知道如何从他最喜欢的IDE(我是Intell…

es6 includes(), startsWith(), endsWith()

传统上,JavaScript 只有 indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes():返回布尔值,表示是否找到了参数字符串。startsWith():返回布尔值,表示参数字符…

Rails之格式化价格方法

一种是直接在试图中队价格信息进行格式化如&#xff1a;<div class"price"><%sprintf("&#xffe5;%0.02f",product.price)%></div>另外一种是用单独的辅助方法来处理价格格式化&#xff0c;即number_to_currency&#xff0c;如&#x…

CodeCombat代码全记录(Python学习利器)--Kithgard地牢代码1

Kithgard地牢注意&#xff1a;在调用函数时&#xff0c;要在函数的后面加上括号内容&#xff0c;否则在python中&#xff0c;将不会认为你在调用这个函数内容&#xff0c;而你的英雄将像木头一样站在原地不会执行上左下右的移动&#xff01;&#xff01;&#xff01; hero.move…

layui upload阻止文件上传问题,及多选文件上传

1、效果展示&#xff1a; 2、需求&#xff1a; 下拉框及月份都为不空&#xff0c;且有文件数据才能提交上传。 3、环境&#xff1a; 目前项目中引用的 layui 版本是 2.4.5。在 before 中进行判断&#xff0c;使用 return false 想要阻止文件上传没反应&#xff0c;文件仍然会…

JPA教程:实体映射-第2部分

在上一篇文章中&#xff0c;我展示了一种持久保存实体的简单方法。 我解释了JPA用于确定实体默认表的默认方法。 假设我们要覆盖此默认名称。 我们之所以喜欢这样做&#xff0c;是因为数据模型是以前设计和修复的&#xff0c;并且表名与我们的类名不匹配&#xff08;例如&#…

Vue DOM事件

本文参考自&#xff1a;https://mp.weixin.qq.com/s?src3&timestamp1527154113&ver1&signaturetWGeTa86gyK*RL0P7nwlA6-8V14FjzxUTh7CM9kQLjl0DV3sx*2hKauMGZKoYBkTSp14Zw6MOD8pU-haYmJoNTSBI5rptCZwf3wTIXLUMUOYDOPZtxm9wJaSm0l7vqshH98ToXQCcfm-5jR-Y66eAYzuFM5…

2019.06.17课件:[洛谷P1310]表达式的值 题解

P1310 表达式的值 题目描述 给你一个带括号的布尔表达式&#xff0c;其中表示或操作|&#xff0c;*表示与操作&&#xff0c;先算*再算。但是待操作的数字&#xff08;布尔值&#xff09;不输入。 求能使最终整个式子的值为0的方案数。 题外话 不久之前我在codewars上做过一…

vue+element 封装日期范围组件(双向绑定)

像这样的日期组件&#xff0c;在后台管理项目中是比较多的&#xff0c;而且加了快捷选项&#xff0c;代码量较多&#xff0c;因此封装成组件。 封装这一类型的组组件&#xff0c;主要是了解输入框双向绑定 v-model 的过程。 1、了解输入框双向绑定的过程&#xff1a; 官网&am…

句柄是什么?1

句柄是什么&#xff1f; 1.句柄是什么&#xff1f; 在windows中&#xff0c;句柄是和对象一一对应的32位无符号整数值。对象可以映射到唯一的句柄&#xff0c;句柄也可以映射到唯一的对象。2.为什么我们需要句柄&#xff1f; 更准确地说&#xff0c;是windows需要句柄。w…

用Hystrix保护您的应用程序

在之前的帖子http://www.javacodegeeks.com/2014/07/rxjava-java8-java-ee-7-arquillian-bliss.html中&#xff0c;我们讨论了微服务以及如何使用&#xff08;RxJava&#xff09;的Reactive Extensions编排微服务。 但是&#xff0c;如果一项或多项服务由于已被暂停或引发异常而…