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

原创

IT利刃出鞘 2022-08-28 00:01:47 ©著作权

文章标签 javascript 前端 java 复用加载顺序 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者IT利刃出鞘的原创作品，请联系作者获取转载授权，否则将追究法律责任

简介

说明

本文介绍<router-view :key=“key“/>中key的作用。

Vue会复用相同组件，对于路由有多个子路由来说，当在子路由来回切换时，会导致页面不刷新的问题，因为不再执行created和mounted这些钩子函数。本文介绍的<router-view :key=“key“/>中的key即可解决这个问题。

官网网址

https://vuejs.bootcss.com/guide/conditional.html#用-key-管理可复用的元素

官网里边有一句：Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可

缺点

加了路由的key值，Vue就会认为这不是同一个组件，update的时候会删除这个组件再重新加载一个新的组件，有严重的性能问题。比如：在后台系统中，点击侧导航菜单子菜单时，设置了:key="$route.path"会导致菜单关闭又打开，视觉效果不好。

代码示例

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.fullPath
    }
  }
}
</script>