如果我在vue3 views 中设置多个文件夹 如admin user 这两个文件夹代表两个登录权限如何去设置两个不同的首页
时间: 2023-06-02 07:01:34 浏览: 53
可以在路由配置文件中设置两个不同的首页:
1. 在路由配置文件中定义两个路由,分别对应不同的登录权限和首页组件。
```
import { createRouter, createWebHistory } from 'vue-router'
import HomeAdmin from '@/views/admin/HomeAdmin.vue'
import HomeUser from '@/views/user/HomeUser.vue'
const routes = [
{
path: '/admin',
name: 'HomeAdmin',
component: HomeAdmin,
meta: {
requiresAdmin: true
}
},
{
path: '/user',
name: 'HomeUser',
component: HomeUser,
meta: {
requiresUser: true
}
},
// other routes here
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
```
2. 在路由守卫中判断用户登录权限,如果是管理员权限则跳转到管理员首页,否则跳转到普通用户首页。
```
router.beforeEach((to, from, next) => {
const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin)
const requiresUser = to.matched.some(record => record.meta.requiresUser)
if (requiresAdmin && !isAdmin()) {
next({ name: 'HomeUser' })
} else if (requiresUser && !isUser()) {
next({ name: 'HomeAdmin' })
} else {
next()
}
})
```
其中,`isAdmin()` 和 `isUser()` 是自定义的判断用户权限的函数。根据实际需求进行修改即可。