vue切換路由後，保存原頁面的input框輸入信息

配合vue-router，可以配置meta中的keep-alive解決這個問題：

• 在vue-router的配置中，添加（keepAlive: true）

  {
    path: '/HelloWorld',
    name: 'HelloWorld',
    component: HelloWorld,
    meta: { requireAuth: true, keepAlive: true },
  },

• 在app.vue中，根據路由中的keepAlive字段動態使用keep-alive標籤，如果meta中的keepAlive爲true進行緩存，否側不進行緩存，這樣可以更靈活一些

<router-view v-if="!$route.meta.keepAlive"></router-view>
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

keep-alive 介紹：

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。

 這樣在路由配置的時候，對需要緩存的路由組件設置keepAlive: true，組件就會被緩存下來了