Question

我想创建一个有条件地显示组件的路由。

例如，用户点击/ home路由。如果用户是指导者，则显示MentorHomeComponent；否则显示MenteeHomeComponent。

最好的方法是什么？

Answer 1

<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>

Answer 2

这是一种简短的方法：

Home.vue

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>

有条件地映射Vue路由器上路由的组件

2 个答案: