问题

在vue中，如果路由指向的页面组件【1】 是同一个，那么路由出口显示的页面组件就不会被重新渲染。

如：有这样三个页面，视图列表引用的是list.vue，新增表单和回显表单使用的都是form.vue。

当我们在“视图列表”过到“新增表单”或者“回显表单时”，都是没有问题的；

而当我们从“回显表单”过到“新增表单”时，就会发现页面没有被刷新，“新增表单”还会带有“回显表单”刚刚的数据；

这就涉及到“vue组件复用”的问题。

原因

如果两个路由都渲染同个组件，组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的自建

解决

方法一：

其中一个解决方法是：加唯一key。

在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法（（created或者mounted），确保组件被重新初始化。

<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>

方法二：

路由配置的 meta 增加 noCache: true

Vue组件复用问题

问题

原因

解决

方法一：

方法二：