Vuejs在注册页面上隐藏组件与v-if使用类星体框架

Question

我正在使用类星体抽屉，我想在注册视图中隐藏抽屉，使用我当前的代码它确实隐藏但问题是当我重新加载注册页面时，它仍然会在几毫秒内呈现在 DOM 中，然后抽屉消失。

我不知道如何解决它根本看不到 DOM 中的抽屉渲染，或者可能控制抽屉，默认将其设置为 false 并在其他路线上手动显式渲染它。

<template>
  <div>
    <q-header elevated class="bg-indigo-4">
      <q-toolbar>
        <q-toolbar-title class="flex flex-center"></q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="drawer"
      v-if="!$route.meta.hideDrawer"
      :width="300"
      :breakpoint="400"
    >
      <q-scroll-area
        style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd"
      >
        <drawer-navigation></drawer-navigation>
      </q-scroll-area>
      <drawer-header></drawer-header>
    </q-drawer>
  </div>
</template>

<script>
import DrawerNavigation from "@/components/navigation/DrawerNavigation";
import DrawerHeader from "@/components/navigation/DrawerHeader";
export default {
  components: {
    DrawerNavigation,
    DrawerHeader
  },
  data() {
    return {
      drawer: true
    };
  }
};
</script>

路由器/index.js

{
 path: "/employers/signup",
 name: "EmployersSignup",
 component: () =>
   import(/* webpackChunkName: "about" */ "../views/EmployerSignup.vue"),
 meta: { hideDrawer: true }
},

Answer 1

尝试制作另一个变量，例如isDrawerHidden: false并放在q-drawer的v-if中

并为.$route.meta.hideDrawer使用观察器，并将被观察元素的值赋给变量isDrawerHidden