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

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

简介

说明

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

        Vue会复用相同组件，对于路由有多个子路由来说，当在子路由来回切换时，会导致页面不刷新的问题，因为不再执行created和mounted这些钩子函数。本文介绍的中的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