router-view中绑定key='$route.fullPath'
原文链接https://www.jianshu.com/p/cf2fb443620f 来源:简书 作者:myzony
不设置 router-view 的 key 属性
由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created,mounted 之类的钩子, 这时候你需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行相关方法拉去数据。
相关钩子加载顺序为:beforeRouteUpdate
设置 router-view 的 key 属性值为 $route.path
从 /page/1 => /page/2, 由于这两个路由的 $route.path 并不一样, 所以组件被强制不复用。
相关钩子加载顺序为:beforeRouteUpdate => created => mounted
从 /page?id=1 => /page?id=2, 由于这两个路由的 $route.path 一样, 所以和没设置key属性一样, 会复用组件。
相关钩子加载顺序为:beforeRouteUpdate
设置 router-view 的 key 属性值为 $route.fullPath
从 /page/1 => /page/2, 由于这两个路由的 $route.fullPath 并不一样, 所以组件被强制不复用。
相关钩子加载顺序为:beforeRouteUpdate => created => mounted
从 /page?id=1 => /page?id=2, 由于这两个路由的 $route.fullPath 并不一样, 所以组件被强制不复用。
相关钩子加载顺序为:beforeRouteUpdate => created => mounted
个人理解:
router-view中绑定key='$route.fullPath'的更多相关文章
- Linq多表联合查询,在View中绑定数据
Ⅰ→通过ViewData传递数据,不过需要新建一个类(用来存) NewClass(里面有表1的字段和表2的字段) public class JoinTab1_2 { public int ID { g ...
- MVVM Light 新手入门(3) :ViewModel / Model 中定义“事件” ,并在View中调用 (无参数调用)
今天学习MVVM架构中“事件”的添加并调用,特记录如下,学习资料均来自于网络,特别感谢翁智华 的 利刃 MVVMLight 6:命令基础 在MVVM Light框架中,事件是WPF应用程序中UI与后台 ...
- angular2 Router类中的路由跳转navigate
navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise` ...
- [asp.net mvc 奇淫巧技] 01 - 封装上下文 - 在View中获取自定义的上下文
我们在asp.net 开发中已经封装了最强大的HttpContext,我们可以在HttpContext中可以获取到几乎任何想获取的东西,也可以在HttpContext写入需要返回客户端的信息.但是这些 ...
- asp.net mvc 在View中获取Url参数的值
如果url是 /home/index?id=3 直接Request就ok. 但是如果路由设定为:{controller}/{action}/{id} url是 /home/index/3 这时想在 ...
- 总结ASP.NET MVC Web Application中将数据显示到View中的几种方式
当我们用ASP.NET MVC开发Web应用程序的时候,我们都是将需要呈现的数据通过"Controllers"传输到"View"当中,怎么去实现,下面我介绍一下 ...
- WPF 在事件中绑定命令(不可以在模版中绑定命令)
其实这也不属于MVVMLight系列中的东东了,没兴趣的朋友可以跳过这篇文章,本文主要介绍如何在WPF中实现将命令绑定到事件中. 上一篇中我们介绍了MVVMLight中的命令的用法,那么仅仅知道命令是 ...
- 如何在FineUIMvc(ASP.NET MVC)视图中绑定多个模型?
起因 这是知识星球内的一个网友提出的,按理说ASP.NET MVC中一个视图只能绑定一个模型(Model),在视图顶部标识如下: @model IEnumerable<FineUICore.Ex ...
- 如何在DataTemplate中绑定RadioButton的Checked事件
在我们的项目中经常要用到数据模板,最近做的一个项目中在数据模板中要放一些RadioButton,其中每一个RadioButton设置了Checked事件,如果直接在View层写Checked事件的话不 ...
随机推荐
- python 比较常见的工具方法
下面是一些工作过程中比较常见的工具方法,但不代表最终答案.希望能对你有所帮助,如果您有更好更多的方法工具,欢迎推荐! 1. 按行读取带json字符串的文件 # -*- coding:utf-8 -*- ...
- Python数据分析:pandas玩转Excel(三)
将对象写入Excel工作表. 要将单个对象写入 Excel .xlsx 文件,只需指定目标文件名即可.要写入多个工作表,必须创建具有目标文件名的ExcelWriter对象,并在文件中指定要写入的工作表 ...
- apt-key 密钥管理,apt-secure 原理 验证链 验证测试
apt-key 用于管理Debian Linux系统中的软件包密钥.每个发布的deb包,都是通过密钥认证的,apt-key用来管理密钥. apt-key list 列出已保存在系统中key.包括 /e ...
- java实现 历届试题 蓝桥杯 打印十字图
历届试题 打印十字图 题目描述 小明为某机构设计了一个十字型的徽标(并非红十字会啊),如下所示(可参见p1.jpg) 对方同时也需要在电脑dos窗口中以字符的形式输出该标志,并能任意控制层数. 为了能 ...
- Java 第十一届 蓝桥杯 省模拟赛十六进制转换成十进制
问题描述 请问十六进制数1949对应的十进制数是多少?请特别注意给定的是十六进制,求的是十进制. 答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这 ...
- Java实现 LeetCode 391 完美矩形
391. 完美矩形 我们有 N 个与坐标轴对齐的矩形, 其中 N > 0, 判断它们是否能精确地覆盖一个矩形区域. 每个矩形用左下角的点和右上角的点的坐标来表示.例如, 一个单位正方形可以表示为 ...
- java实现哈密顿回路问题
1 问题描述 什么是哈密顿回路? 引用自百度百科: 哈密顿图(哈密尔顿图)(英语:Hamiltonian path,或Traceable path)是一个无向图,由天文学家哈密顿提出,由指定的起点前往 ...
- Java实现 洛谷 P1426 小鱼会有危险吗
import java.util.LinkedList; import java.util.Scanner; public class Main { private static Scanner ci ...
- java实现 洛谷 P1464 Function
import java.util.HashMap; import java.util.Iterator; import java.util.LinkedList; import java.util.S ...
- java实现第二届蓝桥杯连通问题(C++)
连通问题. BMP是常见的图像存储格式. 如果用来存黑白图像(颜色深度=1),则其信息比较容易读取. 与之相关的数据: (以下偏移均是从文件头开始) 偏移:10字节, 长度4字节: 图像数据真正开始的 ...