原文链接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. SPL基础接口

    Iterator 迭代器接口 SPL规定,所有实现了Iterator接口的class,都可以用在foreach Loop中.Iterator接口中包含5个必须实现的方法: interface Iter ...

  2. 允许远程用户登录访问mysql

    方法1.本地登入mysql,更改 “mysql” 数据库里的 “user” 表里的 “host” 项,将”localhost”改为”%” mysql -u root -proot use mysql; ...

  3. vue-cli3区分开发和生产环境

    vue-cli3出来很久了,之前一直使用vue-cli2的配置,并且区分了生产和开发环境,自己的理解,环境分两大类,开发环境 和生产环境,最近升级到了vue-cli4当然改动并不大. 升级的主要原因嘛 ...

  4. 使用VuePress搭建个人博客

    使用VuePress搭建个人博客 VuePress 是一个基于 Vue 的静态网站生成器.其中主要用到:Vue,VueRouter,Webpack. 类似的工具:hexo 基于 Markdown 语法 ...

  5. Excel常用小方法

    Excel快捷键 Excel中处理工作表的快捷键 插入新工作表 Shift+F11或Alt+Shift+F1 移动到工作簿中的下一张工作表 Ctrl+PageDown 移动到工作簿中的上一张工作表 C ...

  6. Java中方法的重载与重写

    1.方法的名字和参数列表称为方法的签名:每个方法具有唯一与其对应的签名: 2.方法的重载:在某个类中,存在具有多个相同名字不同参数列表的方法,称之为重载: 被重载的方法必须改变参数列表(参数个数或类型 ...

  7. 06 . Python3入门之IO编程(文件操作)

    IO编程简介 IO在计算机中指Input/Output,也就是输入和输出.由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘.网络等,就需要IO接口 ...

  8. jQuery-键值对理解

    1.form表单 <form action='url' method='get/post'> <input type='text'/> <input type='pass ...

  9. PowerPC-MPC56xx 启动模式

    https://mp.weixin.qq.com/s/aU4sg7780T3_5tJeApFYOQ   参考芯片参考手册第5章:Chapter 5 Microcontroller Boot   The ...

  10. Rocket - diplomacy - wirePrefix

    https://mp.weixin.qq.com/s/DVcA2UixnB_6vgI3SjZGyQ   调试wirePrefix方法.   1. 实现   wirePrefix用于调整名称格式,其实现 ...