VueJS使用Vue Router时如何实现跨组件条件渲染控制？

针对你的需求，这里提供3种不同适用场景的实现方式，按推荐优先级排序：

方案1：路由元信息（最推荐，实现最简单） #

直接通过路由内置的meta字段标记路由对应的布局展示规则，无需父子组件通信。

1. 修改路由配置，给需要控制布局的路由添加自定义标识：

const routes = [
  {
    path: '/',
    component: () => import('layouts/Layout.vue'),
    children: [
      { path: '/info', component: () => import('pages/Info.vue'), meta: { showHeaderNav: true } },
      { path: '/order', component: () => import('pages/Order.vue'), meta: { showHeaderNav: true } },
      { path: '/setup', component: () => import('pages/Mapping'), meta: { showHeaderNav: false } }
    ]
  }
]

2. 在Layout.vue中直接读取当前路由的meta字段做条件渲染即可：

<template>
  <div class="layout">
    <Header v-if="$route.meta.showHeaderNav" />
    <NavBar v-if="$route.meta.showHeaderNav" />
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

如果使用Vue3组合式API，需要先引入useRoute获取路由实例：

import { useRoute } from 'vue-router'
const route = useRoute()

模板中替换为route.meta.showHeaderNav即可。

方案2：provide/inject 跨组件通信（适合灵活控制布局场景） #

如果除了隐藏Header/NavBar之外，还需要动态修改其他布局属性，可以用Vue内置的跨级组件通信方案：

1. 在Layout.vue中对外提供布局控制方法和状态：

<script setup>
import { ref, provide } from 'vue'
const showHeaderNav = ref(true)
// 对外暴露控制方法
provide('layoutControl', {
  showHeaderNav,
  setShowHeaderNav: (value) => {
    showHeaderNav.value = value
  }
})
</script>

<template>
  <Header v-if="showHeaderNav" />
  <NavBar v-if="showHeaderNav" />
  <router-view />
</template>

2. 在Setup.vue中注入控制方法，进入页面时隐藏布局组件，离开时恢复：

<script setup>
import { inject, onBeforeUnmount } from 'vue'
const { setShowHeaderNav } = inject('layoutControl')
// 进入页面隐藏头部和导航
setShowHeaderNav(false)
// 离开页面恢复默认显示
onBeforeUnmount(() => {
  setShowHeaderNav(true)
})
</script>

方案3：全局状态管理（适合大型项目多页面控制场景） #

如果项目中有大量页面需要控制布局状态，可以把布局状态存放在Pinia/Vuex全局store中，Layout组件读取store状态，子组件调用store方法修改状态即可。

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