原文链接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'>中,通过绑定一个fullPath,可以识别当前页面路由的完整地址,当地址发生改变(包括参数改变)则重新渲染页面(例如动态路由参数的变化)

router-view中绑定key='$route.fullPath'的更多相关文章

  1. Linq多表联合查询,在View中绑定数据

    Ⅰ→通过ViewData传递数据,不过需要新建一个类(用来存) NewClass(里面有表1的字段和表2的字段) public class JoinTab1_2 { public int ID { g ...

  2. MVVM Light 新手入门(3) :ViewModel / Model 中定义“事件” ,并在View中调用 (无参数调用)

    今天学习MVVM架构中“事件”的添加并调用,特记录如下,学习资料均来自于网络,特别感谢翁智华 的 利刃 MVVMLight 6:命令基础 在MVVM Light框架中,事件是WPF应用程序中UI与后台 ...

  3. angular2 Router类中的路由跳转navigate

    navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise` ...

  4. [asp.net mvc 奇淫巧技] 01 - 封装上下文 - 在View中获取自定义的上下文

    我们在asp.net 开发中已经封装了最强大的HttpContext,我们可以在HttpContext中可以获取到几乎任何想获取的东西,也可以在HttpContext写入需要返回客户端的信息.但是这些 ...

  5. asp.net mvc 在View中获取Url参数的值

    如果url是 /home/index?id=3 直接Request就ok. 但是如果路由设定为:{controller}/{action}/{id} url是 /home/index/3   这时想在 ...

  6. 总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

    当我们用ASP.NET MVC开发Web应用程序的时候,我们都是将需要呈现的数据通过"Controllers"传输到"View"当中,怎么去实现,下面我介绍一下 ...

  7. WPF 在事件中绑定命令(不可以在模版中绑定命令)

    其实这也不属于MVVMLight系列中的东东了,没兴趣的朋友可以跳过这篇文章,本文主要介绍如何在WPF中实现将命令绑定到事件中. 上一篇中我们介绍了MVVMLight中的命令的用法,那么仅仅知道命令是 ...

  8. 如何在FineUIMvc(ASP.NET MVC)视图中绑定多个模型?

    起因 这是知识星球内的一个网友提出的,按理说ASP.NET MVC中一个视图只能绑定一个模型(Model),在视图顶部标识如下: @model IEnumerable<FineUICore.Ex ...

  9. 如何在DataTemplate中绑定RadioButton的Checked事件

    在我们的项目中经常要用到数据模板,最近做的一个项目中在数据模板中要放一些RadioButton,其中每一个RadioButton设置了Checked事件,如果直接在View层写Checked事件的话不 ...

随机推荐

  1. spring的动态代理实现

    Host.java package cn.zys.dynamiproxy; public class Host implements Rent{ public void rent(){ System. ...

  2. 不懂代码?没关系,照样可以做SaaS软件开发

    众所周知,一家标准化的企业的日常运营管理都需要一个强大的中枢或中台管理系统来统筹整个企业或是整个集团的运作,这个强大的中台管理系统就相当于是企业的引擎.在引擎的带动下,汽车可以快速的飞驰起来,同样,在 ...

  3. 了解Lombok插件

    Lombok是什么 Lombok可以通过注解形式帮助开发人员解决POJO冗长问题,帮助构造简洁和规范的代码,通过注解可产生相应的方法. Lombok如何在IDEA中使用 我们都知道,使用一种工具,一定 ...

  4. Linux passwd 提权

    利用条件,passwd 可写 ls -al /etc/passwd 利用方式: 生成密钥  openssl passwd -1 -salt test 123456 写入passwd echo 'tes ...

  5. Salesforce LWC学习(十七) 前端知识之 onclick & onblur & onmousedown

    在Salesforce LWC学习(八) Look Up组件实现篇中,我们实现了公用的lookup组件,使用的过程中,会发现当我们输入内容以后,搜索出来的列表便无法被清空. 针对此种情况我们打算优化一 ...

  6. jchdl - GSL实例:HalfAdder

    https://mp.weixin.qq.com/s/Y97bIro7UlPPFCoPlzgmOQ 半加器电路是指对两个输入相加,输出一个结果位和,没有进位输入的电路. 是实现两个一位二进制数的加法运 ...

  7. Flutter 动画鼻祖之CustomPaint

    老孟导读:CustomPaint可以称之为动画鼻祖,它可以实现任何酷炫的动画和效果.CustomPaint本身没有动画属性,仅仅是绘制属性,一般情况下,CustomPaint会和动画控制配合使用,达到 ...

  8. python(3.x)自动化全栈开发100天集训计划(跟上进度,到一个新高度)——day1

            Day1 目录: Python介绍 * 了解Python的特点.发展史 * 介绍Python广泛的应用领域和前景 第一个Python程序 * 掌握Python代码的2种执行方式 变量 ...

  9. SpringMVC(二)返回值设置、数据在域中的保存与SpringMVC案例

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.返回值的设置 1.返回 String [1]返回 String 默认情况 @RequestMappi ...

  10. Java实现 蓝桥杯 算法提高 计算超阶乘(暴力)

    试题 算法提高 计算超阶乘 问题描述 计算1*(1+k)(1+2k)(1+3k)-(1+n*k-k)的末尾有多少个0,最后一位非0位是多少. 输入格式 输入的第一行包含两个整数n, k. 输出格式 输 ...