如何基于Vuex布尔值为Vue2 vue-router路由动态切换布局

完全可以基于Vuex的用户角色标识实现同路径下动态匹配布局，不需要修改现有路由路径，推荐以下两种实现方案：

方案1：动态根布局组件（最推荐，改造成本最低） #

这个方案通过一个中间代理布局组件动态渲染对应角色的布局，原有子路由配置完全不需要调整：

1. 新增RootLayout.vue代理布局组件：

<template>
  <component :is="layoutComponent">
    <!-- 透传路由视图到布局组件的插槽中 -->
    <router-view />
  </component>
</template>
<script>
import AdminLayout from './AdminLayout.vue'
import UserLayout from './UserLayout.vue'
export default {
  name: 'RootLayout',
  computed: {
    // 读取Vuex中存储的管理员标识
    isAdmin() {
      return this.$store.state.user.isAdmin
    },
    layoutComponent() {
      return this.isAdmin ? AdminLayout : UserLayout
    }
  }
}
</script>

2. 修改你admin.js中的根路由配置，把原来写死的component: AdminLayout替换为RootLayout即可：

export default {
  path: "/",
  redirect: "/dashboard",
  component: RootLayout, // 替换为动态根布局
  meta: {
    requiresAuth: true
  },
  children: [
    // 原有子路由配置完全保留，不需要任何修改
    {
      path: "/dashboard",
      name: "Dashboard",
      component: Dashboard
    },
    // ...其他子路由
  ]
}

方案2：路由守卫动态修改布局组件 #

如果只需要部分路由适配不同布局，也可以通过全局前置守卫动态修改匹配路由的布局组件：

1. 在你的路由入口文件中导入两个布局组件，添加全局守卫逻辑：

import Vue from "vue";
import VueRouter from "vue-router";
import store from '../store' // 导入Vuex实例
import AdminLayout from './AdminLayout.vue'
import UserLayout from './UserLayout.vue'

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
});

// 新增全局前置守卫
router.beforeEach((to, from, next) => {
  const isAdmin = store.state.user.isAdmin
  // 匹配到需要动态布局的父路由时动态替换组件
  if (to.matched.length && to.matched[0].path === '/') {
    to.matched[0].components.default = isAdmin ? AdminLayout : UserLayout
  }
  next()
})

export default router;

注意事项 #

• 两种方案都完全保留原有路由路径，用户访问地址无任何感知
• 原有路由的meta权限校验逻辑不受影响，可以正常使用
• 方案1不会出现路由缓存匹配问题，稳定性更高，优先推荐使用

内容的提问来源于stack exchange，提问作者BobiDaHombre