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

旧城等待， 2023-09-28 19:36 9阅读 0赞

原文网址：[Vue--Router--＜router-view :key=“keyName“/＞中key的作用\_IT利刃出鞘的博客-CSDN博客][Vue--Router--_router-view _key_keyName_key_IT_-CSDN]

## 简介 ##

**说明**

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

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

**官网网址**

[https://vuejs.bootcss.com/guide/conditional.html\#用-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>

### 1. 不设置key 属性 ###

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

相关钩子函数为: beforeRouteUpdate

### 2. 设置 key 属性值为 $route.path ###

**/page/1 => /page/2**

由于这两个路由的$route.path不一样, 所以组件被强制不复用, 相关钩子加载顺序为:

beforeRouteUpdate => created => mounted

**/page?id=1 => /page?id=2**,

由于这两个路由的$route.path一样, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为:

beforeRouteUpdate

### 3. 设置 key 属性值为 $route.fullPath ###

**/page/1 => /page/2**

由于这两个路由的$route.fullPath不一样, 所以组件被强制不复用, 相关钩子加载顺序为:  
beforeRouteUpdate => created => mounted

**/page?id=1 => /page?id=2**

由于这两个路由的$route.fullPath不一样, 所以组件被强制不复用, 相关钩子加载顺序为:  
beforeRouteUpdate => created => mounted

[Vue--Router--_router-view _key_keyName_key_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126273586
[https_vuejs.bootcss.com_guide_conditional.html_-key-]: https://vuejs.bootcss.com/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0