Как проверить, существует ли именованный вид в vue -маршрутизаторе - PullRequest
Новая
       4

Как проверить, существует ли именованный вид в vue -маршрутизаторе

3 голосов
/ 17 июня 2020

Я реализую панель управления на основе ролей пользователя, где представление маршрута будет отображаться в зависимости от роли.

root вид: (имя изменяется в роли пользователя) 

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

и мой route: 

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

Меня беспокоит, что для роли 'admin' не определен компонент для маршрута /recording, и я хочу показать какое-то сообщение по умолчанию, если пользователь admin пытается выполнить go to recording

как проверить, существует ли какой-либо именованный компонент представления с именем admin для маршрута recording, а если нет, то pu sh пользователь для default просмотра

1 Ответ

0 голосов
/ 17 июня 2020

Я решаю проблему изменения панели управления для разных ролей пользователя, используя тот же маршрут, но изменяя загружаемый компонент.

Предполагается, что у вас есть 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>
...