完善带参路由缓存案例，顺便解决 issues #133

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

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"
+            v-for="page in opened"
-            :key="index"
+            :key="page.fullPath"
             :label="page.meta.title || '未命名'"
             :name="page.fullPath"/>
         </el-tabs>

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 () {
+  computed: {
-    return {
+    /**
-      value: ''
+     * 带参路由多组参数使用同一个组件实例，需要在组件内部对多个参数的情况进行统一处理
+     * 这里简单演示如何根据 id 管理多组数据对象
+     */
+    data: function () {
+      const id = this.id
+      let data = datas[id]
+      if (!data) {
+        data = { value: '' }
+        datas[id] = data
+      }
+      return data
     }
   }
 }