如何检查vue-router中是否存在命名视图答案

【问题标题】：How to check if named view exists in vue-router如何检查vue-router中是否存在命名视图
【发布时间】：2020-06-17 07:32:16
【问题描述】：

我正在实现一个基于用户角色的仪表板，其中将根据角色呈现路线视图。

根视图：（根据用户角色更改名称）

<template v-if="user">
    <router-view :name="user.type"></router-view>
</template>
<template v-else>
    <router-view></router-view>
</template>

还有我的路线：

{
      path: '/recordings',
      name: 'Recording',
      components: { default: NotFoud, shows: Recording },
      meta: {
        requiresAuth: true,
        title: 'Recording'
      },
      children: [],
    },

我担心的是，对于“管理员”角色，没有为 /recording 路由定义组件，如果管理员用户尝试转到 recording，我想显示一些默认消息

如何检查 recording 路由是否存在名为 admin 的命名视图组件，如果不存在则将用户推送到 default 视图

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

我解决了为不同角色用户更改仪表板的问题，使用相同的路由，但更改要加载的组件。

假设您有 AdminDashboard 用于管理员角色和 ClientDashboard 用于客户端。

在我的例子中，当用户登录时，用 Vuex 存储角色

<template>
  <div class="dashboard-container">
    <component :is="currentRole" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

import AdminDashboard from '@/views/dashboard/adminDashboard';
import ClientDashboard from '@/views/dashboard/clientDashboard';

export default {
  name: 'Dashboard',
  components: { AdminDashboard , ClientDashboard },
  data() {
    return {
      currentRole: 'AdminDashboard ',
    };
  },
  computed: {
    ...mapGetters([
      'role',
    ]),
  },
  created() {
    if (this.role==='client'){
      this.currentRole = 'ClientDashboard';
    }
  },
};
</script>

【讨论】：