import Vue from "vue"; interface Iscenes { id: string; name: string; selected: boolean; } export default Vue.extend({ data() { const sceneOption: Iscenes[] = [{ id: "1", name: "场景1", selected: false, },{ id: "2", name: "场景2", selected: false, },{ id: "3", name: "场景3", selected: false, }]; return { form: { name: "", initScene: "", }, sceneOption, }; }, created() { const {label= "", scene= ""} = this.$route.query; this.form = { name: label.toString(), initScene: scene.toString(), }; }, watch: { $route(to, from) { if (to.path === "/list/listEdit") { const {label= "", scene= ""} = to.query; this.form = { name: label.toString(), initScene: scene.toString(), }; } }, }, methods: { submitForm() { console.log("test"); } }, });
最后，再来看一下，路由部分的配置：
import ListDetail from "../views/list-detail/index.vue"; import List from "../views/list/index.vue"; import { MenuConfig } from "./index"; export const listRouter: MenuConfig = { path: "/list", component: List, title: "目录管理", key: "list", name: "list", hasPermission: true, subShow: false, children: [{ path: "listEdit", title: "编辑目录", hasPermission: true, name: "ListEdit", key: "ListEdit", component: ListDetail, }], };