如何基于Vue Router实现侧边栏的条件式显示？

问题描述 #

基于Vue Router实现带有可选侧边栏的布局，当前已完成以下配置：

1. App.vue中使用MainLayout组件，通过插槽放置router-view：

<main-layout>
    <template #main>
        <router-view/>
    </template>
    <template #sidebar>
        <router-view name="LeftSidebar"/>
    </template>
    <template #rightsidebar>
        <router-view name="RightSidebar"/>
    </template>
</main-layout>

2. 路由配置示例：

const routes = [
  {
    path: "/lectures",
    components: {
      default: LectureList,
      LeftSidebar: MainMenu,
    }
  },
  {
    path: "/users",
    components: {
      default: UserList,
      LeftSidebar: MainMenu,
      RightSidebar: SomeOtherComponent
    }
  },
]

3. MainLayout.vue简化结构：

<div>
    <div class="left-sidebar">
        <slot name="sidebar"/>
    </div>
    <div class="main">
        <slot/>
    </div>
    <div class="right-sidebar">
        <slot name="rightsidebar"/>
    </div>
</div>

需求：.right-sidebar仅在路由提供RightSidebar组件时才渲染。尝试通过判断插槽是否存在添加v-if无效，因为插槽内已包含router-view。

解决方法 #

方案1：路由元信息控制 #

在路由配置中添加meta字段标记是否启用右侧侧边栏，直接在MainLayout中通过路由元信息判断渲染状态。

步骤1：更新路由配置

const routes = [
  {
    path: "/lectures",
    components: {
      default: LectureList,
      LeftSidebar: MainMenu,
    },
    meta: { showRightSidebar: false }
  },
  {
    path: "/users",
    components: {
      default: UserList,
      LeftSidebar: MainMenu,
      RightSidebar: SomeOtherComponent
    },
    meta: { showRightSidebar: true }
  },
]

步骤2：修改MainLayout.vue

<div>
    <div class="left-sidebar">
        <slot name="sidebar"/>
    </div>
    <div class="main">
        <slot/>
    </div>
    <div class="right-sidebar" v-if="$route.meta.showRightSidebar">
        <slot name="rightsidebar"/>
    </div>
</div>

方案2：动态检测路由组件 #

通过监听路由变化，检查当前路由是否包含RightSidebar组件，动态控制右侧栏显示。

修改MainLayout.vue：

<template>
<div>
    <div class="left-sidebar">
        <slot name="sidebar"/>
    </div>
    <div class="main">
        <slot/>
    </div>
    <div class="right-sidebar" v-if="showRightSidebar">
        <slot name="rightsidebar"/>
    </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      showRightSidebar: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.showRightSidebar = !!this.$route.components?.RightSidebar
      }
    }
  }
}
</script>

方案3：动态控制App.vue中的插槽传递 #

在App.vue中根据路由是否存在RightSidebar组件，决定是否渲染#rightsidebar插槽，再在MainLayout中判断插槽是否存在来控制右侧栏显示。

步骤1：修改App.vue

<main-layout>
    <template #main>
        <router-view/>
    </template>
    <template #sidebar>
        <router-view name="LeftSidebar"/>
    </template>
    <!-- 仅当路由配置了RightSidebar时才渲染该插槽 -->
    <template #rightsidebar v-if="$route.components?.RightSidebar">
        <router-view name="RightSidebar"/>
    </template>
</main-layout>

步骤2：修改MainLayout.vue

<div>
    <div class="left-sidebar">
        <slot name="sidebar"/>
    </div>
    <div class="main">
        <slot/>
    </div>
    <!-- 检查插槽是否有内容 -->
    <div class="right-sidebar" v-if="$slots.rightsidebar">
        <slot name="rightsidebar"/>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Andrei S