diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index f4c326b8..97409daf 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -405,3 +405,23 @@ export const convertToNumber = (value: number | string, parentValue = 0) => {
 
   return parseFloat(value);
 };
+
+/**
+ * 添加参数到URL
+ * @param obj 参数对象
+ * @param global window对象
+ * @param needReload 是否需要刷新
+ */
+export const addParamToUrl = (obj: Record<string, any>, global = globalThis, needReload = true) => {
+  const url = new URL(global.location.href);
+  const { searchParams } = url;
+  for (const [k, v] of Object.entries(obj)) {
+    searchParams.set(k, v);
+  }
+  const newUrl = url.toString();
+  if (needReload) {
+    global.location.href = newUrl;
+  } else {
+    global.history.pushState({}, '', url);
+  }
+};
diff --git a/runtime/vue2/page/App.vue b/runtime/vue2/page/App.vue
index f604551c..27bd78ab 100644
--- a/runtime/vue2/page/App.vue
+++ b/runtime/vue2/page/App.vue
@@ -5,10 +5,11 @@
 <script lang="ts">
 import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
 
+import type { Page } from '@tmagic/core';
 import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
-import { isPage, replaceChildNode } from '@tmagic/utils';
+import { addParamToUrl, isPage, replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
@@ -17,6 +18,13 @@ export default defineComponent({
     const app = inject<Core | undefined>('app');
     const pageConfig = ref(app?.page?.data || {});
 
+    app?.on('page-change', (page?: Page) => {
+      if (!page) {
+        throw new Error(`页面不存在`);
+      }
+      addParamToUrl({ page: page.data.id }, window);
+    });
+
     app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
       nodes.forEach((node) => {
         if (isPage(node)) {
diff --git a/runtime/vue3/page/App.vue b/runtime/vue3/page/App.vue
index f604551c..27bd78ab 100644
--- a/runtime/vue3/page/App.vue
+++ b/runtime/vue3/page/App.vue
@@ -5,10 +5,11 @@
 <script lang="ts">
 import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
 
+import type { Page } from '@tmagic/core';
 import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
-import { isPage, replaceChildNode } from '@tmagic/utils';
+import { addParamToUrl, isPage, replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
@@ -17,6 +18,13 @@ export default defineComponent({
     const app = inject<Core | undefined>('app');
     const pageConfig = ref(app?.page?.data || {});
 
+    app?.on('page-change', (page?: Page) => {
+      if (!page) {
+        throw new Error(`页面不存在`);
+      }
+      addParamToUrl({ page: page.data.id }, window);
+    });
+
     app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
       nodes.forEach((node) => {
         if (isPage(node)) {