Vue router routes on same path with different components

Question

I'm trying to create routes in vue router on the same path, but with different components per user type.

Basically I have two user types: - citizen - tourist

And I want them to have different components when they go to the root path ("/").

Is there a way I can have some sort of if statement in my router? I don't want them to have a path similar to "/citizen/" or "/tourist". The components (and their children) should be entirely different though.

The folder structure for the views looks like this:

- views
 -- user
  --- login
  --- register
 -- citizen
  --- home
  --- benefits
  --- locations
 -- tourist
  --- home
  --- accommodations
  --- sightseeing

Any ideas how to accomplish this best in a Vue Router?

Answer 1

<component :is="componentName"></component>. Just display appropriate component depending on user type, using computed property. Let's consider home.vue where you can load different components depending on user type.

home.vue

<template>
  <component :is="appropriateComponent"></component>
</template>

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

export default {
  components: {
    FirstComponent: () => import("/path/to/component/FirstComponent"),
    SecondComponent: () => import("/path/to/component/SecondComponent")
  },
  computed: {
    // I asume that you store your user in Vuex, so you can get user type through getter
    // But you can get user type from anywhere
    ...mapGetters("user", ["userType"]),
    appropriateComponent() {
      return this.userType === "citizen" ? "FirstComponent" : "SecondComponent";
    }
  }
};
</script>