Question

我正在尝试在vue路由器中的同一路径上创建路由，但每种用户类型的组件不同。

基本上，我有两种用户类型： - 公民 -游客

我希望它们在进入根路径（“ /”）时具有不同的组件。

我是否可以在路由器中使用某种if语句？我不希望他们使用类似于“ / citizen /”或“ / tourist”的路径。组件（及其子组件）应该完全不同。

视图的文件夹结构如下：

"_id": "5d40a40f93ba712bd43835c8",
"__v": 0,
"registration_REF": {
    "incentives_REF": [
        "5d406e9bc4a3d0110047dc82"
    ],
    "_id": "5d406d237374b00aaca17fdc",
    "dateBeg": "2018-11-29T00:00:00.000Z",
    "dateEnd": "2019-11-29T00:00:00.000Z",
    "__v": 10
}

有什么想法如何在Vue Router中做到最好？

Answer 1

<component :is="componentName"></component>。使用计算属性，仅根据用户类型显示适当的组件。让我们考虑home.vue，您可以在其中根据用户类型加载不同的组件。

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>

Vue路由器在具有不同组件的同一路径上路由

1 个答案: