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