在某些页面上不显示菜单组件，但它会显示一段时间答案

【问题标题】：On some pages don't show Menu Component but it is visible for a while在某些页面上不显示菜单组件，但它会显示一段时间
【发布时间】：2021-11-01 02:04:29
【问题描述】：

我不想在登录和注册页面上显示菜单组件。我创建了两个布局。一个有菜单，第二个没有。接下来我在 vue 路由器中添加了元链接

{
 path: "/login",
 name: "Login",
 meta: {
  layout: "NoMenu",
 },
 component: () =>
   import(/* webpackChunkName: "login" */ "../views/Login.vue"),
 },

这是应用程序中的功能

<template>
  <Component :is="layout"></Component>
</template>
[...]
computed: {
layout() {
  return (
    this.$route.meta.layout || "Default") + "-layout";
 },
},

问题是当我进入登录页面时，菜单会显示一段时间（不到一秒）。我认为这可能会发生，bcs vue-router 加载同步并在函数获取 this.$route 之前安装组件。有什么想法可以暂时修复这个显示菜单吗？

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

你要找的可能是v-if。来自文档：

指令 v-if 用于有条件地渲染一个块。只有当指令的表达式返回一个真值时，才会呈现该块。

如果您像这样使用<Component v-if="showMenu"></Component> 的组件并将showMenu 设置为boolean 初始化为false 的数据属性，您可以确定它应该何时显示。

这可能是用户登录时的一种状态。据我了解，您只想在用户未登录时隐藏菜单。所以这可能是您的一种方法。

更多信息：Conditional Rendering

【讨论】：

这是我的第一个想法，但不起作用。我在一些不和谐小组的帮助下弄清楚了这一点。问题是 $router 正在加载同步。并且将 v-if 与 $router 一起使用并不是一个好主意（组件在 $router 之前加载，这就是菜单显示一段时间的原因）。为了解决这个问题，我使用了两个不同的模板。一个有菜单，第二个没有。在路由器中，我指定了哪个路径必须使用哪个模板
@Dawid 这很奇怪，因为我在自己的应用程序中完全按照您的要求做，没有第二个模板。而且我可以确认组件不在路由器加载之前渲染。