vue-router命名视图条件容器：如何检测命名视图是否存在

要实现v-if="名为nav的命名视图已定义"的效果，你可以通过Vue Router提供的当前路由信息来判断，具体步骤如下：

1. 定义计算属性判断命名视图是否存在 #

在组件的script部分添加一个计算属性，检查当前路由的匹配项中是否包含名为nav的命名视图：

export default {
  // ...其他组件选项
  computed: {
    hasNavView() {
      // 获取当前路由的最后一个匹配项（对应当前页面的路由配置）
      const currentRoute = this.$route.matched[this.$route.matched.length - 1]
      // 检查该路由配置的components中是否存在"nav"命名视图
      return currentRoute?.components?.nav !== undefined
    }
  }
}

2. 在模板中使用计算属性控制显示 #

修改v-navigation-drawer的代码，添加v-if绑定上述计算属性：

<template>
  <system-bar></system-bar>
  <!-- 仅当存在nav命名视图时显示导航抽屉 -->
  <v-navigation-drawer
    v-bind='navDrawerProps'
    v-if="hasNavView"
  >
    <template v-slot:prepend>
      <v-list-item @click='rail = !rail' prepend-icon="mdi-menu"></v-list-item>
      <v-divider></v-divider>
    </template>
    <template v-slot:append>
      <v-divider></v-divider>
      <v-list-item>
        <template v-if='model.connection?.token'>
          <router-link to='/logout'><v-list-item prepend-icon="mdi-logout-variant">Logout</v-list-item></router-link>
        </template>
        <template v-else>
          <v-list-item prepend-icon="mdi-login-variant" @click='login'>Login / Signup</v-list-item>
        </template>
      </v-list-item>
    </template>
    <router-view name="nav"></router-view>
  </v-navigation-drawer>
  <v-main app>
    <router-view></router-view>
  </v-main>
</template>

原理说明 #

• 路由配置中，当页面需要显示导航抽屉内容时，需在该路由的components字段里声明nav对应的组件，示例如下：

  const routes = [
    {
      path: '/dashboard',
      components: {
        default: Dashboard, // 主视图组件
        nav: DashboardNav // 命名视图nav对应的组件
      }
    },
    {
      path: '/login',
      component: Login // 仅主视图，无nav命名视图
    }
  ]
  

• 计算属性hasNavView会检查当前路由是否配置了nav命名视图，若配置则返回true，导航抽屉显示；反之则隐藏。

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