diff --git a/src/pages/demo/d2-crud/demo16/doc.md b/src/pages/demo/d2-crud/demo16/doc.md
index 509e20bd..6e1e63ea 100644
--- a/src/pages/demo/d2-crud/demo16/doc.md
+++ b/src/pages/demo/d2-crud/demo16/doc.md
@@ -1 +1 @@
-通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据。代码如下：
+通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增。代码如下：
diff --git a/src/pages/demo/d2-crud/demo17/doc.md b/src/pages/demo/d2-crud/demo17/doc.md
index d5da9a8b..de4b3925 100644
--- a/src/pages/demo/d2-crud/demo17/doc.md
+++ b/src/pages/demo/d2-crud/demo17/doc.md
@@ -1 +1 @@
-通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据。代码如下：
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑。代码如下：
diff --git a/src/pages/demo/playground/page-cache/params.vue b/src/pages/demo/playground/page-cache/params.vue
index f80f8b65..c385c36a 100644
--- a/src/pages/demo/playground/page-cache/params.vue
+++ b/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'))
     }
   }
 }