时间戳

首页 > 解决方案 > Vue路由器在具有不同组件的同一路径上路由

vue.js - Vue路由器在具有不同组件的同一路径上路由

问题描述

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

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

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

有没有办法在我的路由器中有某种​​ if 语句？我不希望他们拥有类似于“/citizen/”或“/tourist”的路径。但是，组件（及其子组件）应该完全不同。

视图的文件夹结构如下所示：

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

任何想法如何在 Vue 路由器中实现这一点？

标签： vue.jsvue-router

解决方案

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

推荐阅读