javascript - Vuejs在注册页面上隐藏组件与v-if使用类星体框架
问题描述
我正在使用类星体抽屉,我想在注册视图中隐藏抽屉,使用我当前的代码它确实隐藏但问题是当我重新加载注册页面时,它仍然会在几毫秒内呈现在 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 }
},
解决方案
尝试制作另一个变量isDrawerHidden: false
,并将其v-if
放在q-drawer
并为变量使用观察者并将观察元素的值!$route.meta.hideDrawer
分配给变量isDrawerHidden
推荐阅读
- android - 如何使我的代码的一部分可供多个活动访问
- asp.net-mvc - 当验证在服务器端并在页面加载时使用数据注释时如何隐藏警报框
- vis.js - Vis js时间线范围元素自定义绘制
- ruby-on-rails - 无法创建 Rails 项目,但安装了 sqlite
- javascript - 将视频从 AWS Kinesis 流式传输到 JS 客户端
- angular - 'object' 类型的 Angular 8 错误'[object Object]'。NgFor 仅支持绑定到 Iterables,例如 Arrays
- google-earth-engine - 应用 reducer.mean() 后图像返回 w/不同的nominalScale()
- java - 在不同的 Spring Boot 启动器中配置 Spring 存储库
- r - R 与 SPSS 中的不同交互 p 值
- sql-server-2008 - 如果存在不在 SQL Server 存储过程中打印伪值