From 229be3c546a1fef5019d45d8b5cd8ab382849267 Mon Sep 17 00:00:00 2001
From: han_feng <han_feng@foxmail.com>
Date: Thu, 15 Nov 2018 11:30:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=B8=A6=E5=8F=82=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E7=BC=93=E5=AD=98=E6=A1=88=E4=BE=8B=EF=BC=8C=E9=A1=BA?=
 =?UTF-8?q?=E4=BE=BF=E8=A7=A3=E5=86=B3=20issues=20#133?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 539ba541e07a43a03b22a16bec8b680ce6011d61 [formerly 539ba541e07a43a03b22a16bec8b680ce6011d61 [formerly 539ba541e07a43a03b22a16bec8b680ce6011d61 [formerly 539ba541e07a43a03b22a16bec8b680ce6011d61 [formerly 26a4e88c8572d7b498fea2791fb9dc428a93d8d3 [formerly 1407c6c3eadde6eb7e539898d13282bf5ec520dc]]]]]
Former-commit-id: 46a26343895210835e3d6c0afc5e046e973054f9
Former-commit-id: b281a46d9e588702e651751d175f876f8e5c0cec
Former-commit-id: 9b9466a5d46d2908a74a0730237f965bec36cad5 [formerly 908c29cced36962c1ae58d0194fa5d96b18b36de]
Former-commit-id: 52f5fe7e02ae4f3421c6aa1ac6bb70369e69855a
Former-commit-id: 7e7de54f344d5178c5083b456eadf6f34b3ceafe
Former-commit-id: 98c5518762f16cc81feb63c7dd700f3b9fced766
Former-commit-id: 1cccd8fcd156848ca8fa8edfa9ae522cce786882
Former-commit-id: 57fb744f0537412125f9eaa360b81e9bae575a43
---
 .../header-aside/components/tabs/index.vue    |  4 +--
 .../demo/playground/page-cache/params.vue     | 26 +++++++++++++++----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/layout/header-aside/components/tabs/index.vue b/src/layout/header-aside/components/tabs/index.vue
index 45b4e029..39f9f63b 100644
--- a/src/layout/header-aside/components/tabs/index.vue
+++ b/src/layout/header-aside/components/tabs/index.vue
@@ -19,8 +19,8 @@
           @edit="handleTabsEdit"
           @contextmenu.native="handleContextmenu">
           <el-tab-pane
-            v-for="(page, index) in opened"
-            :key="index"
+            v-for="page in opened"
+            :key="page.fullPath"
             :label="page.meta.title || '未命名'"
             :name="page.fullPath"/>
         </el-tabs>
diff --git a/src/pages/demo/playground/page-cache/params.vue b/src/pages/demo/playground/page-cache/params.vue
index 7ce777ba..8a512920 100644
--- a/src/pages/demo/playground/page-cache/params.vue
+++ b/src/pages/demo/playground/page-cache/params.vue
@@ -3,19 +3,35 @@
     <template slot="header">这个页面会被 keep-alive</template>
     <h2 class="d2-mt-0">编号：{{id}}</h2>
     <p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
-    <el-input v-model="value" placeholder="input here"></el-input>
+    <!-- 使用 el-input 会出现显示值与 v-model 不一致的情况，解决问题前暂时使用 input -->
+    <input v-model="data.value" placeholder="input here" />
   </d2-container>
 </template>
 
 <script>
+const datas = {}
+
 export default {
   name: 'demo-playground-page-cache-params',
   props: {
-    id: String
+    id: {
+      type: String,
+      required: true
+    }
   },
-  data () {
-    return {
-      value: ''
+  computed: {
+    /**
+     * 带参路由多组参数使用同一个组件实例，需要在组件内部对多个参数的情况进行统一处理
+     * 这里简单演示如何根据 id 管理多组数据对象
+     */
+    data: function () {
+      const id = this.id
+      let data = datas[id]
+      if (!data) {
+        data = { value: '' }
+        datas[id] = data
+      }
+      return data
     }
   }
 }