javascript - Vue路由器-如何根据用户角色在同一路由路径上加载多个组件?
问题描述
我有应用程序,用户可以在其中以不同的角色登录,例如。seller
,buyer
和admin
. 对于每个用户,我想在同一路径上显示仪表板页面,例如。http://localhost:8080/dashboard
但是,每个用户将在不同的 vue 组件中定义不同的仪表板,例如。SellerDashboard
,BuyerDashboard
和AdminDashboard
.
所以基本上,当用户打开http://localhost:8080/dashboard
vue 应用程序时,应该根据用户角色(我存储在 vuex 中)加载不同的组件。同样,我想将它用于其他路线。例如,当用户进入个人资料页面时,http://localhost:8080/profile
应用程序应根据登录用户显示不同的个人资料组件。
所以我想为所有用户角色设置相同的路由,而不是为每个用户角色设置不同的路由,例如。我不希望用户角色包含在 url 中,如下所示:http://localhost:8080/admin/profile
等等http://localhost:8080/seller/profile
......
如何使用 vue 路由器实现此场景?
我尝试使用子路由和每个路由保护的组合beforeEnter
来解析基于用户角色的路由。这是一个代码示例:
在router.js中:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import store from '@/store'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
beforeEnter: (to, from, next) => {
next({ name: store.state.userRole })
},
children: [
{
path: '',
name: 'admin',
component: () => import('@/components/Admin/AdminDashboard')
},
{
path: '',
name: 'seller',
component: () => import('@/components/Seller/SellerDashboard')
},
{
path: '',
name: 'buyer',
component: () => import('@/components/Buyer/BuyerDashboard')
}
]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
在store.js中:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userRole: 'seller' // can also be 'buyer' or 'admin'
}
})
App.vue包含顶级路由的父路由视图,例如。映射/
到Home
组件和/about
组件About
:
<template>
<router-view/>
</template>
<script>
export default {
name: 'App',
}
</script>
并且Home.vue包含嵌套router-view
不同用户的基于角色的组件:
<template>
<div class="home fill-height" style="background: #ddd;">
<h1>Home.vue</h1>
<!-- nested router-view where user specific component should be rendered -->
<router-view style="background: #eee" />
</div>
</template>
<script>
export default {
name: 'home'
}
</script>
但它不起作用,因为当Maximum call stack size exceeded
我调用next({ name: store.state.userRole })
. beforeEnter
例外是:
vue-router.esm.js?8c4f:2079 RangeError: Maximum call stack size exceeded
at VueRouter.match (vue-router.esm.js?8c4f:2689)
at HTML5History.transitionTo (vue-router.esm.js?8c4f:2033)
at HTML5History.push (vue-router.esm.js?8c4f:2365)
at eval (vue-router.esm.js?8c4f:2135)
at beforeEnter (index.js?a18c:41)
at iterator (vue-router.esm.js?8c4f:2120)
at step (vue-router.esm.js?8c4f:1846)
at runQueue (vue-router.esm.js?8c4f:1854)
at HTML5History.confirmTransition (vue-router.esm.js?8c4f:2147)
at HTML5History.transitionTo (vue-router.esm.js?8c4f:2034)
因此没有渲染任何内容。
有没有办法解决这个问题?
解决方案
您可能想尝试解决此解决方案:
<template>
<component :is="compName">
</template>
data: () {
return {
role: 'seller' //insert role here - maybe on `created()` or wherever
}
},
components: {
seller: () => import('/components/seller'),
admin: () => import('/components/admin'),
buyer: () => import('/components/buyer'),
}
或者,如果您更喜欢整洁一点(结果相同):
<template>
<component :is="loadComp">
</template>
data: () => ({compName: 'seller'}),
computed: {
loadComp () {
const compName = this.compName
return () => import(`/components/${compName}`)
}
}
这将使您可以使用动态组件,而无需预先导入所有 cmp,而每次只使用所需的一个。
推荐阅读
- javascript - 在 nodejs 中调用 module.exports 时未定义的结果
- node.js - Strategy.OAuth2Strategy.parseErrorResponse 出错 - NodeJS 护照谷歌 oauth2.0
- php - PHP多次在文本中查找关键字 - 在字符之前/之后显示
- android - 完成后如何访问 onDataChange 返回的值?
- elixir - 运行 Mix 文档时出现 Elixir 版本错误
- php - 如何匹配子域 Wordpress 博客的 Bootstrap 站点的外观?
- reactjs - 如何修改firebase数据库以便我可以设置已读或未读状态
- c++ - 抛出 C++ 异常:读取访问冲突
- spring - 通过百里香形式添加文本格式
- c# - 带有 Microsoft.Extensions.DependencyInjection 和 asp.net web api 2 的拦截器,用于横切关注点,例如日志记录