＜router-view :key=“key“/＞中key的作用

router-view 中key作用，你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。

这里router-view 有一个key的属性，这个key的属性作用是：

1. 不设置 router-view 的 key 属性
由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子, 这时候你需要在路由组件中, 添加beforeRouteUpdate钩子来执行相关方法拉去数据

相关钩子加载顺序为: beforeRouteUpdate

2. 设置 router-view 的 key 属性值为 $route.path
从/page/1 => /page/2, 由于这两个路由的$route.path并不一样, 所以组件被强制不复用, 相关钩子加载顺序为:
beforeRouteUpdate => created => mounted

从/page?id=1 => /page?id=2, 由于这两个路由的$route.path一样, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为:
beforeRouteUpdate

3. 设置 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" />

与data平级：

beforeRouteUpdate(_to,_from,next){

this.$chic.scropTotop(this.$refs.routerView)

next()

}

嗯。。。。。还是不太理解透彻

＜router-view :key=“key“/＞中key的作用相关推荐

redis查看某一个key的大小_redis查看某个key redis中key的操作命令 - Redis - 服务器之家...
redis查看某个key redis中key的操作命令发布时间:2017-04-02 来源:服务器之家在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List. ...
key mysql_mysql中key 、primary key 、unique key 与index区别
mysql中索引是非常重要的知识点,相比其他的知识点,索引更难掌握,并且mysql中的索引种类也有很多,比如primary key .unique key 与index等等,本文章向大家介绍mysql ...
vue 相同的id不合并_vue中key的作用
摘要本文结合源码说明了key的作用,给出了一个不写key的反例,并分析了原因. 内容 key的作用不写key会出的bug及原因分析 key的实践方案 key的作用在数据变化前后,vue会得到两个 ...
【Day08】请简述虚拟 DOM 中 Key 的作用和好处
请简述虚拟 DOM 中 Key 的作用和好处官网地址:https://cn.vuejs.org/v2/api/#key key 的作用 key 的特殊 attribute 主要用在 Vue 的虚拟 ...
Vue中key属性的作用
Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用 ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
react中key的作用
背景: 如果为父节点添加多个相同的子节点时,不添加key属性,会报错但同时也会渲染出dom,渲染出dom其实是证明能从差异对象中渲染出真实dom,但报错的原因是因为这种写法会影响渲染的性能,不利于生层 ...
Vue3中key的作用和工作原理
这个key属性有什么作用呢?我们先来看一下官方的解释: key属性主要用在Vue的虚拟DOM diff算法中,在新旧nodes对比时辨识Vnodes: 如果不使用key,Vue会使用一种最大限度减少动 ...
【Vue】中Key的作用
Vue中key的作用虚拟DOM 虚拟DOM 本质上是一个js对象 ,通过对象来表示真实的DOM结构. key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据新数据生成新的虚拟DO ...

＜router-view :key=“key“/＞中key的作用

＜router-view :key=“key“/＞中key的作用相关推荐

最新文章

热门文章