How to check if named view exists in vue-router

user_8458454 0
Viewed 950

I am implementing a user role based dashboard where route view will be rendered upon role.

root view: (name is changed on user role)

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

and my route: 

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

my concern is, for 'admin' role there is no component defined for /recording route and i want to show some default message if admin user trying to go to recording

how to check if there any named view component named admin for recording route exists and if not then push user to default view

vue-router vue.js
1 Answers

I solve the problem of change dashboard for different role user, using the same route, but changing the component to load.

Assuming you have AdminDashboard for admin role and ClientDashboard for clients.

In my case, when the user is logged, store the role with 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>
user_80936800
Related