完善带参路由数据缓存案例

Former-commit-id: cf663fb2365102070ae5833803509e54cc6d8fa5 [formerly cf663fb2365102070ae5833803509e54cc6d8fa5 [formerly cf663fb2365102070ae5833803509e54cc6d8fa5 [formerly cf663fb2365102070ae5833803509e54cc6d8fa5 [formerly 5d3de55f1b3e944e154873794e9c427248fc60e2 [formerly 2ada62f9c7a52c41dcb34558f4b2666222d3d0aa]]]]]
Former-commit-id: 02c29c75895f6c43a3a4e1566e417725622aceed
Former-commit-id: f3838ec28879abf6836ce0709a455bbcdac9c1c8
Former-commit-id: d0a5abbdb2b10e8fda7934542ea9cbd42834e4e6 [formerly 782ff584d75016f13f86477cbb28e4b943043538]
Former-commit-id: 66ff5411c711194e790c9e04d5d954f47eda321a
Former-commit-id: 18244d2e4276b5fd315438c9b6fbef5c20b1cedb
Former-commit-id: 0689add39f32302ae4b4013f15342b9a3da4441a
Former-commit-id: 779aac8c587496eec2e54be7fe2e5f35e01daa33
Former-commit-id: ec613125c710f1bdabc19c10f5f164fb7f7b9db1

src/pages/demo/playground/page-cache/params.vue

@@ -3,14 +3,16 @@
     <template slot="header">这个页面会被 keep-alive</template>
     <h2 class="d2-mt-0">编号：{{id}}</h2>
     <p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
-    <!-- 使用 el-input 会出现显示值与 v-model 不一致的情况，解决问题前暂时使用 input -->
+    <el-input v-model="data.value" placeholder="input here" />
     <input v-model="data.value" placeholder="input here" />
   </d2-container>
 </template>
 
 <script>
-const datas = {}
-
+/**
+ * 带参路由多组参数使用同一个组件实例，需要在组件内部对多个参数的情况进行统一处理
+ * 这里简单演示如何根据 id 管理多组数据对象
+ */
 export default {
   name: 'demo-playground-page-cache-params',
   props: {
@@ -21,22 +23,42 @@ export default {
   },
   data () {
     return {
-      filename: __filename
+      filename: __filename,
+      datas: [],
+      data: { value: '' }
     }
   },
-  computed: {
-    /**
-     * 带参路由多组参数使用同一个组件实例，需要在组件内部对多个参数的情况进行统一处理
-     * 这里简单演示如何根据 id 管理多组数据对象
-     */
-    data: function () {
-      const id = this.id
-      let data = datas[id]
+  methods: {
+    switchData (id) {
+      let data = this.datas[id]
       if (!data) {
         data = { value: '' }
-        datas[id] = data
+        this.datas[id] = data
       }
-      return data
+      this.data = data
+    }
+  },
+  // 第一次进入或从其他组件对应路由进入时触发
+  beforeRouteEnter (to, from, next) {
+    console.log('beforeRouteEnter => ', to)
+    const id = to.params.id
+    if (id) {
+      next(vm => {
+        vm.switchData(id)
+      })
+    } else {
+      next(new Error('未指定ID'))
+    }
+  },
+  // 在同一组件对应的多个路由间切换时触发
+  beforeRouteUpdate (to, from, next) {
+    console.log('beforeRouteUpdate => ', to)
+    const id = to.params.id
+    if (id) {
+      this.switchData(id)
+      next()
+    } else {
+      next(new Error('未指定ID'))
     }
   }
 }