多个路由渲染同个组件(.vue)

VUE组件重用问题 - 两个路由渲染同个组件

问题：

添加或修改时，希望用到同一个页面，添加页面本来不应该有数据，但是显示了修改时重显数据。此时想到最简单的方式在created()中清除数据，但是并不起作用

原因：

vue-router导航切换时，如果两个路由都渲染同个组件，组件的生命周期方法（created或者mounted）不会再被调用,组件会被重用，显示上一个路由渲染出来数据

解决方案

可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。
修改 src/views/layout/components/AppMain.vue 文件如下：

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

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {   <!-- 修改后-->
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()  
    }
  }
}
</script>
...
...