有没有一种方法可以根据用户角色加载一条路线的不同视图？

Question

如果我想根据角色将主页路径“/”用于不同的视图，是否有一些实现？就像如果您是授权用户，您会看到MainAuth，如果您是访客，您会看到MainGuest？这是一些可以帮助我解释的代码。

const routes = [
  {
    path: '/',
    name: 'main_auth',
    component: MainAuth,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/',
    name: 'main_guest',
    component: MainGuest,
    meta: {
      requiresGuest: true
    }
  }
]

对于这个例子，它只加载我声明的第一个路径，无论我是访客还是用户。更具体地说，我在主路径“/”上有一个登录/注册模块，并且我想在登录后在同一路径“/”上加载授权用户页面。

Answer 1

这里有 3 个选项：

1. 简单的计算视图

要允许单个路由显示任意数量的条件视图，请使用计算组件。

注册视图：

import Vue from 'vue'

import ViewDefault from '/views/Default.vue'
Vue.component('view-default', ViewDefault )

import ViewAuth from '/views/Auth.vue'
Vue.component('view-auth', ViewAuth )

import ViewGuest from '/views/Guest.vue'
Vue.component('view-guest', ViewGuest)

路线：

  {
    path: '/',
    name: 'index',
    component: ViewDefault
  },

看法Default.vue

  {
    path: '/',
    name: 'index',
    component: ViewDefault
  },

您将能够在 中创建任意数量的条件检查view()。

2.条件命名视图（概念未尝试）

我会考虑尝试使用命名视图，我相信您可以使用用户和来宾版本双重查看许多路径，但我还没有尝试过：

https://router.vuejs.org/guide/essentials/named-views.html

<template>
  <component :is="view"></component>
</template>

<script>

export default {

  name: 'view-default',

  computed: {

   view() {
     return this.isAuthenticated ? 'view-auth' : 'view-guest'
   }  

  }

}

</script>

Router

<template>

  <div>

    <template v-if="isAuthenticated">
      <router-view name="authed"/>
    </template>
  
    <template v-else>
      <router-view/>
    </template>

  </div>

</template>

3. 计算布局

然而......我个人使用 I/O 阻塞布局，计算的layout。

我检查各种应用程序状态，这些状态控制根据条件显示的布局，然后计算出包含<router-view>.

我让路由器路径通过meta数据指定自定义布局，设置备用布局，否则回退到默认布局。

Router

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: MainGuest,
        authed: MainAuth,
      }
    }
  ]
})

App.vue

  {
    name: 'index',
    path: '/',
    meta: {
      title: 'Welcome',
      guard: 'auth'
    },
    component: import('@/views/welcome')
  },

  {
    name: 'settings',
    path: '/settings',
    meta: {
      title: 'Account Settings',
      layout: 'settings',
      guard: 'auth'
    },
    component:  import('@/views/account-settings')
  }

main.js

<template>

  <div id="app" v-cloak :class="$root.layout">

    <transition name="component-fade" mode="out-in">
      <component :is="$root.layout"/>
    </transition>

  </div>

</template>

views/layouts/index.js

import Vue from 'vue'

import LayoutOffline from './layout-offline')
import LayoutAuthenticating from './layout-authenticating')
import LayoutLogin from './layout-login')

import LayoutDefault from './layout-default')
import LayoutSettings from './layout-settings')

Vue.component('layout-offline', LayoutOffline)
Vue.component('layout-authenticating', LayoutAuthenticating)
Vue.component('layout-login', LayoutLogin)

Vue.component('layout-default', LayoutDefault)
Vue.component('layout-settings', Layoutsettings)

仅layout-default指定自定义布局的路由器路径或任何路由器路径应包含<router-view>页眉、页脚、侧边栏等...

您可以将其与名称视图混合，不同的计算布局可以router-view为相同的path.

Answer 2

由于您只想使用一个路径，因此您可以使用基本路径并在组件本身中完成工作。路线：

const routes = [
  {
    path: '/',
    name: 'main',
    component: Main,
  }
]

Main查看组件：

<template>
  <div>
    <Auth v-if="!loggedIn" />
    <MainContent v-else />
  </div>
</template>

Auth成分：

<template>
  <div>
    <Login v-if="showLogin" />
    <Register v-else />
  </div>
</template>

这样，您可以检查用户是否从视图组件登录Main并显示Auth组件或主要内容。

然后，在组件中，您使用允许用户在和组件Auth之间切换的切换开关。LoginRegister