vue.js - vue3中如何根据路由有条件地渲染多个组件而不影响布局

Question

我有一个导航栏和两个侧边菜单，可在多个页面中使用。但是对于许多页面，我不想有侧面菜单。

我曾尝试将 v-if 与 $router.name 一起使用，但因为我使用的是网格系统，所以布局会中断。然后也不可能添加多个组件来不呈现侧边菜单。

这是模板：

<template>
    <TheNavbar/>
    <div class="container">
      <TheLeftMenu/>
      <router-view/>
      <TheRightMenu/>
    </div>
</template>

Answer 1

我避免网格系统挤压路由器视图组件的解决方案是将模板分成两部分，一个使用边菜单，另一个不使用它们。

然后，为了让多个页面不加载侧边菜单，我使用了一个计算属性来保存一个数组，其中包含所有不呈现侧边菜单的路线：

<template>
  <div v-if="blockedRoutes.includes($route.name) == false">
    <TheNavbar/>
    <div class="container">
      <TheLeftMenu/>
      <router-view/>
      <TheRightMenu/>
    </div>
  </div>
  <div v-else>
    <TheNavbar/>
    <router-view/>
  </div>
</template>

---

  computed: {
    blockedRoutes () {
      return ['Register', 'SignIn', 'About']
    }
  }