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