路由添加

package.json

@@ -16,6 +16,7 @@
     "element-ui": "^2.15.1",
     "file-saver": "^2.0.5",
     "vue": "^2.6.11",
+    "vue-router": "^3.6.5",
     "vue2-editor": "^2.10.2",
     "vuedraggable": "^2.24.3"
   },

src/App.vue

@@ -1,45 +1,11 @@
 <template>
   <div id="app">
-    <VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv">
-      <template #customToolButtons>
-        <el-button type="text" @click="printFormJson">测试按钮</el-button>
-      </template>
-    </VFormDesigner>
+    <router-view />
   </div>
 </template>
 
 <script>
-import VFormDesigner from './components/form-designer/index.vue'
-
 export default  {
-  name: 'App',
-  components: {
-    VFormDesigner,
-  },
-  data() {
-    return {
-      designerConfig: {
-        resetFormJson: false,
-        toolbarMaxWidth: 490,
-      },
-
-      //全局数据源变量
-      globalDsv: {
-        testApiHost: 'http://www.test.com/api',
-        testPort: 8080,
-      },
-    }
-  },
-  methods: {
-    printFormJson() {
-      console.log( this.$refs.vfDesignerRef.getFormJson() )
-    }
-  }
+  name:  'App'
 }
 </script>
-
-<style lang="scss">
-  #app {
-    height: 100%;
-  }
-</style>

src/main.js

@@ -1,3 +1,12 @@
+/*
+ * @version: V1.0.0
+ * @Date: 2023-03-20 14:56:35
+ * @LastEditors: lzq
+ * @LastEditTime: 2023-03-20 15:24:44
+ * @company: 睿展数据
+ * @FilePath: \variant-form\src\main.js
+ * @Descripttion: 
+ */
 import 'babel-polyfill'
 import './utils/debug-console'
 import Vue from 'vue'
@@ -6,7 +15,7 @@ import App from './App.vue'
 import ElementUI from 'element-ui'
 import './utils/directive'
 import './icons'
-
+import router from './router/index'
 import 'element-ui/lib/theme-chalk/index.css'
 import '@/styles/index.scss'
 import '@/iconfont/iconfont.css'
@@ -25,5 +34,6 @@ Vue.config.productionTip = false
 
 new Vue({
   el: "#app",
+  router,
   render: h => h(App),
 })

src/router/index.js

@@ -0,0 +1,27 @@
+/*
+ * @version: V1.0.0
+ * @Date: 2023-03-20 15:18:00
+ * @LastEditors: lzq
+ * @LastEditTime: 2023-03-20 15:26:58
+ * @company: 睿展数据
+ * @FilePath: \variant-form\src\router\index.js
+ * @Descripttion: 
+ */
+import Vue from "vue";
+import Router from 'vue-router'
+import Home from "@/views/index.vue";
+Vue.use(Router);
+// 公共路由
+export const constantRoutes = [
+  {
+    path: "/",
+    component: Home,
+    hidden: true,
+  },
+];
+
+export default new Router({
+  base: process.env.VUE_APP_CONTEXT_PATH,
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRoutes,
+});

src/views/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="app">
+    <VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv">
+      <template #customToolButtons>
+        <el-button type="text" @click="printFormJson">测试按钮</el-button>
+      </template>
+    </VFormDesigner>
+  </div>
+</template>
+
+<script>
+import VFormDesigner from '@/components/form-designer/index.vue'
+
+export default {
+  name: 'App',
+  components: {
+    VFormDesigner,
+  },
+  data() {
+    return {
+      designerConfig: {
+        resetFormJson: false,
+        toolbarMaxWidth: 490,
+      },
+
+      //全局数据源变量
+      globalDsv: {
+        testApiHost: 'http://www.test.com/api',
+        testPort: 8080,
+      },
+    }
+  },
+  methods: {
+    printFormJson() {
+      console.log( this.$refs.vfDesignerRef.getFormJson() )
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  #app {
+    height: 100%;
+  }
+</style>