Vue 라우터의 경로에 대한 조건별 매핑 구성 요소

Vue 라우터의 경로에 대한 조건별 매핑 구성 요소

구성 요소를 조건부로 표시하는 경로를 만들고 싶다.

예를 들어, 사용자가 /home 경로를 친다.사용자가 멘토인 경우 멘토 표시HomeComponent(홈 구성 요소), 그렇지 않으면 멘티 표시홈구성 요소.

이것을 하는 가장 좋은 방법은 무엇인가?

이것은 한 가지 짧은 방법이다.

홈뷰

export default {
  data() {
    return {
      mentor: false
    }
  },
  mounted() {
    this.mentor ? this.$router.push({name : 'MentorHomeComponent'}) 
                : this.$router.push({name : 'MenteeHomeComponent'})
  }
}

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<component :is="componentName"></component>. 사용자 권한에 따라 적절한 구성 요소를 표시하십시오.computed재산

<template lang="pug">
  component(:is="appropriateComponent")
</template>

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

export default {
  components: {
    FirstComponent: () => import("@/views/FirstComponent"),
    SecondComponent: () => import("@/views/SecondComponent")
  },
  computed: {
    ...mapGetters("user", ["isAdmin"]),
    appropriateComponent() {
      return this.isAdmin ? "FirstComponent" : "SecondComponent";
    }
  }
};
</script>

참조URL: https://stackoverflow.com/questions/57240736/conditionally-map-components-for-routes-on-vue-router