Javascript 将其他属性传递给路由器元字段值

我正在使用Vuetify创建一个管理仪表板，该仪表板通过身份验证进行保护。基本上我需要多个布局，因为我的登录视图不需要工具栏、边栏等

我为我的登录组件创建了一个PublicCenteredLayout

<template>
  <v-container class="fill-height" fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="4">
        <router-view></router-view>
      </v-col>
    </v-row>
  </v-container>
</template>

在动态组件的帮助下，我通过

$route.meta.layout

呈现正确的布局。正如您所看到的使用预定义列的布局

一样，我想知道是否有一种方法可以将这些信息作为附加值传递到布局字段。伪代码是

meta:{layout:PublicCenteredLayout{sm:8，md:4}

但这是无效的语法。我能想到的唯一解决办法是

meta: {
  layoutInfo: {
    component: PublicCenteredLayout
    // additional fields here
  }
}

所以我可以通过

$route.meta.layoutInfo.sm

访问这些字段。这个解决方案可能不是最好的，因为JavaScript提供了这个值，即使它不存在。对于VUE3，我想切换到TypeScript，然后可能会遇到一些错误

有更好的主意吗？

我这样做。。。 src/App.vue

<template>
  <v-app>
    <component :is="layout">
      <router-view :layout.sync="layout" />
    </component>
  </v-app>
</template>

<script>
export default {
  name: "App",
  components: {},
  data: () => ({
    layout: "div"
  })
};
</script>

导出默认值{
名称：“应用程序”，
组件：{}，
数据：（）=>({
版式：“div”
})
};

然后在视图页面中，我导入了我想要使用的模板，并将其传递给用户。。。。 此.vue视图页面使用basic.vue布局

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Basic from "../layouts/basic.vue";
export default Vue.extend({
  name: "About",
  created() {
    this.$emit("update:layout", Basic);
  }
});
</script>

这是一个关于页面
从“Vue”导入Vue；
从“./layouts/Basic.vue”导入Basic；
导出默认Vue.extend({
姓名：“关于”，
创建（）{
这.$emit（“更新：布局”，基本）；
}
});

这是一个不同的模板

<template>
  <div class="dashboard">
    <h1>This is my dashboard page</h1>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Fancy from "../layouts/fancy-with-menu.vue";
export default Vue.extend({
  name: "Dashboard",
  created() {
    this.$emit("update:layout", Fancy);
  }
});
</script>

这是我的仪表板页面
从“Vue”导入Vue；
从“./layouts/Fancy with menu.vue”导入花式菜单；
导出默认Vue.extend({
名称：“仪表板”，
创建（）{
这.$emit（“更新：布局”，Fancy）；
}
});

您所说的“JavaScript提供这个值，即使它不存在”是什么意思？我认为你提出的解决方案很好。我的意思是，我可以访问对象密钥，即使它们不存在。使用TypeScript，我可能无法做到这一点，因为它知道哪些类成员存在，哪些不存在，这是您主要关心的问题–TypeScript兼容性？在typescript中，可以指定可选字段。但是，我还可以想象，

meta

属性无论如何都会有

any

类型，以允许任何用户类型（我看不出您会如何强烈地键入它）。是的，如果这是

any

类型，应该可以：）

<template>
  <div class="dashboard">
    <h1>This is my dashboard page</h1>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Fancy from "../layouts/fancy-with-menu.vue";
export default Vue.extend({
  name: "Dashboard",
  created() {
    this.$emit("update:layout", Fancy);
  }
});
</script>