基于 Vuex 的布尔值的显示布局

Question

我得到了带有 vue-router 的 Vue2 应用程序，其路由配置如下：

export default {
  path: "/",
  redirect: "/dashboard",
  component: AdminLayout,
  meta: {
    requiresAuth: true
  },
  children: [
    {
      path: "/dashboard",
      name: "Dashboard",
      component: Dashboard
    },
    {
      path: "/add/user",
      name: "InviteUser",
      component: InviteUser
    },
    {
      path: "/groups",
      name: "Groups",
      component: Groups
    },
   ...

在应用程序中，我们有两种不同类型的用户 - 管理员和普通用户。其中一些路由应该可供两者访问，但问题是用户应该根据其类型（权限）看到不同的布局 - 管理员为AdminLayout，普通用户为UserLayout。

有什么方法可以根据来自 vuex 的布尔值向应用显示用户应该看到哪个模板并保持路由路径？

• 在/dashboard 管理员将看到带有AdminLayout 的仪表板
• 在/dashboard 上，普通用户将看到带有UserLayout 的仪表板

我的主要路由配置：

import Vue from "vue";
import VueRouter from "vue-router";

import SessionRoutes from "./session.js";
import AdminRoutes from "./admin.js";
import defaultRoutes from "./default";

Vue.use(VueRouter);

const routes = [AdminRoutes, SessionRoutes, defaultRoutes];

const router = new VueRouter({
  mode: "history",
  routes
});

export default router;

Answer 1

您可以在当前页面的布局部分设置条件，例如当您使用 nuxt 时：

<script>
  export default {
      layout: (ctx) => (ctx.isAdmin ? 'adminLayout' : 'userLayout'),
  }
</script>

但我认为您不使用 Nuxt.js，我认为以下解决方案适合您的问题：

1. 在我们的路由中使用元对象
2. 在 app.vue 页面设置动态组件
3. about.vue 页面的代码

    import Home from '../views/Home.vue'
    import About from '../views/About.vue'
    import LayoutA from '../layouts/LayoutA.vue'
    import LayoutB from '../layouts/LayoutB.vue'
    Vue.use(VueRouter)
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home,
        meta: { layout: LayoutA }
      },
      {
        path: '/about',
        name: 'About',
        component: About,
        meta: { layout: LayoutB }
      }
    ]
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router;

<!--app.vue page -->

<template>
  <div id="app">
    <component :is="this.$route.meta.layout || 'div'">
      <router-view />
    </component>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>


<!--about page-->
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
export default {
  name: "About"
};
</script>

Answer 2

要使仪表板和所有子路由使用不同的布局，您的布局必须使用the router view component。我按照这种方法在我的一个项目中使用包装器组件来处理这个问题。

摘自我的路由器配置：

…
  {
    component: MainFrame,
    name: 'main',
    path: '/',
    redirect: 'dashboard',
    children: [
      {
        alias: 'dashboard',
        component: Dashboard,
        name: 'dashboard',
        path: '', // Default child route → be equivalent to /dashboard
      },
      {
        path: "add/user",
        name: "InviteUser",
        component: InviteUser
      },
      {
        path: "groups",
        name: "Groups",
        component: Groups
      },
    ],
  },
…

在MainFrame 组件中，您可以将布局包装在dynamic component 中。因此，您可以基于 Vuex getter 轻松切换布局：

MainFrame.vue

<template>
  <component :is="layout">
    <!-- you can use slots too if you like -->
  </component>
</template>

<script>
import AdminLayout from './AdminLayout'
import UserLayout from './UserLayout'

export default {
  computed: {
    layout() {
      return this.$store.getters['isAdminUser'] ? AdminLayout : UserLayout
    }
  }
}
</script>

而且你的布局必须使用<router-view />。它作为所有嵌套路由的包装器，因此您只有一个地方来处理仪表板和子页面的布局：

AdminLayout.vue

<template>
  <div class="auth-view">
    <header>…</header>
    <aside>…</aside>
    <main>
      <transition name="fade" mode="out-in">
        <router-view />
      </transition>
    </main>
    <footer>…</footer>
  </div>
</template>

UserLayout.vue

<template>
  <div class="guest-view">
    <router-view />
  </div>
</template>

---

编辑：

这种方法也可以用于更深的嵌套。假设您的用户路由应该有另一个子路由，您可以在路由器配置上使用渲染函数中的<router-view /> 解决这个问题：

…
      // Let's split down user related routes
      {
        component: { render: (h) => h('router-view') },
        name: 'usersView',
        path: 'users',
        redirect: 'ListUsers',
        children: [
          // Show users
          {
            path: '', // route: /users/
            name: 'ListUsers',
            component: ListUsers
          },
          // Show a single user
          {
            path: ':id', // route: /users/{userId}
            name: 'ViewUser',
            component: ViewUser
          },
          // Invite new users
          {
            path: 'add', // route: /users/add
            name: 'InviteUser',
            component: InviteUser
          },
        ]
      }
…