vue实现不同主页

动态路由与权限控制

在Vue中实现不同主页的核心是动态路由和权限控制。通过路由守卫（beforeEach）拦截导航，根据用户角色或权限动态加载对应的主页组件。

// router.js
const router = new VueRouter({
  routes: [
    { path: '/', component: LoadingComponent }, // 初始加载页
    { path: '/admin', component: AdminHome, meta: { requiresAuth: true, role: 'admin' }},
    { path: '/user', component: UserHome, meta: { requiresAuth: true, role: 'user' }}
  ]
})

router.beforeEach((to, from, next) => {
  const userRole = store.getters.userRole // 假设从Vuex获取用户角色
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (to.meta.role !== userRole) {
      next('/unauthorized') // 角色不匹配跳转
    } else {
      next()
    }
  } else {
    next()
  }
})

条件渲染组件

对于简单的场景，可以在主布局中使用v-if或动态组件<component :is="currentHome"/>切换不同主页。

<template>
  <div>
    <AdminHome v-if="userRole === 'admin'"/>
    <UserHome v-else-if="userRole === 'user'"/>
    <GuestHome v-else/>
  </div>
</template>

<script>
export default {
  computed: {
    userRole() {
      return this.$store.state.user.role
    }
  }
}
</script>

模块化入口文件

通过Webpack的动态导入实现按需加载，减少初始包体积。结合路由懒加载提升性能。

// 动态导入组件
const Home = () => import(`@/homes/${userType}Home.vue`)

// 路由配置示例
{
  path: '/',
  component: () => import('./homes/' + getUserType() + 'Home.vue')
}

状态管理集成

将主页类型存储在Vuex中，便于全局管理和响应式更新。结合持久化插件（如vuex-persistedstate）保存用户偏好。

// store/modules/user.js
export default {
  state: {
    homeType: 'default'
  },
  mutations: {
    SET_HOME_TYPE(state, type) {
      state.homeType = type
    }
  }
}

多实例方案

对于完全独立的主页系统，可创建多个Vue根实例，通过后端返回不同的HTML入口文件实现物理隔离。

<!-- 由后端根据用户类型返回不同入口 -->
<script>
  window.userType = '<%= userType %>'
</script>
<script src="<%= userType %>-app.js"></script>

每种方案适用于不同场景，简单条件渲染适合小型应用，动态路由适合中大型应用，多实例方案则适用于完全隔离的子系统。实际选择需考虑项目规模、维护成本和性能要求。