避免陷阱！掌握Vue嵌套路由“key”的使用技巧，彻底解决组件重复渲染BUG

Vue嵌套路由中的“key”

在Vue.js的嵌套路由中，<router-view>组件用于渲染动态路由的内容。<router-view>组件可以嵌套在其他组件中，形成嵌套路由结构。

当<router-view>组件嵌套在其他组件中时，为了避免组件重复渲染，需要在<router-view>组件上设置key属性。key属性的值可以是任何唯一标识符，例如组件的ID或名称。

“根据参数动态渲染路由”时组件重复渲染的原因

在“根据参数动态渲染路由”时，如果<router-view>组件上没有设置key属性，或者key属性的值不唯一，就会导致组件重复渲染。

这是因为，当路由参数发生变化时，Vue.js会重新渲染<router-view>组件。如果<router-view>组件上没有设置key属性，或者key属性的值不唯一，Vue.js就会将<router-view>组件及其子组件重新渲染一遍。

如何解决组件重复渲染的问题

为了解决组件重复渲染的问题，需要在<router-view>组件上设置key属性，并确保key属性的值是唯一的。

可以通过以下方式设置<router-view>组件的key属性：

1. 在<router-view>组件上直接设置key属性。例如：

<router-view key="home"></router-view>

2. 在父组件中通过props传递key属性。例如：

<template>
  <router-view :key="key"></router-view>
</template>

<script>
export default {
  props: ['key']
}
</script>

3. 在Vuex中存储key属性，然后在<router-view>组件中通过$store获取key属性。例如：

<template>
  <router-view :key="$store.state.key"></router-view>
</template>

<script>
export default {
  computed: {
    key() {
      return this.$store.state.key
    }
  }
}
</script>

总结

在Vue.js的嵌套路由中，为了避免组件重复渲染，需要在<router-view>组件上设置key属性，并确保key属性的值是唯一的。

可以通过直接在<router-view>组件上设置key属性、通过父组件通过props传递key属性、或者在Vuex中存储key属性等方式来设置<router-view>组件的key属性。