vue.js - 有条件地映射 Vue 路由器上的路由组件

Question

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

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

做这个的最好方式是什么？

标签： vue.jsvue-router

Answer 1

这是一种捷径：

主页.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>