Vue Router 路由跳转后返回保持页面内容不变

<p>可以使用 Vue 的`<keep-alive>`组件来缓存组件，从而实现在路由跳转后返回页面内容组件不变的效果。具体操作如下：</p>
<ol>
  <li>在 App.vue 中使用`<keep-alive>`组件将需要缓存的组件包裹起来：</li>
  <pre><code>
  <template>
    <div id="app">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </template>
  </code></pre>
  <li>在需要缓存的组件中设置 name 属性：</li>
  <pre><code>
  <template>
    <div>
      <!-- 组件内容 -->
    </div>
  </template>
  <script>
  export default {
    name: 'News', // 设置组件名称
    // ...
  }
  </script>
<p></code></pre></p>
  <li>在路由跳转时，使用`<router-view>`组件的 key 属性来强制刷新组件：</li>
  <pre><code>
  <template>
    <div>
      <button @click="goToNews">跳转到News页面</button>
    </div>
  </template>
  <script>
  export default {
    methods: {
      goToNews() {
        this.$router.push({
          path: 'news',
          query: { id: id },
          // 使用时间戳作为key，强制刷新组件
          key: Date.now()
        })
      }
    }
  }
  </script>
<p></code></pre></p>
<p>这样，在路由跳转后再返回时，`<keep-alive>`组件会自动缓存之前的组件内容，保持页面不变。而在路由跳转时，通过设置`<router-view>`组件的 key 属性来强制刷新组件，确保组件中的数据能够更新。</p>