Vue中所有路由的动态组件选择器

Question

我想在Vue中设置动态路由，由我的后端API驱动。我看过的样板文件建议对所有路线使用单个组件。全局导航保护从API加载当前页面数据，并根据从后端发送的组件名称显示正确的页面：

路由器.ts

const router = new VueRouter({
routes: [
{
path: '*',
component: PageSelector
}
],
mode: 'history'
})
router.beforeEach((to, from, next) => {
loadModelByUrl(to.fullPath) // load async page data from API
next()
})

页面选择器.vue

<template>
<component v-if="model" :is="model.componentName" :key="model.guid"/>
</template>

App.vue

<template>
<div id="app">
<div id="nav"></div>
<router-view />
</div>
</template>

与使用更标准的路由配置相比，使用这种方法有明显的缺点吗？

Answer 1

我认为答案取决于您的项目需求。

使用现有的设置，您将失去vue路由器提供的一系列好处，如道具、查询参数、子路由、beforeEnterguard等。

尽管如果后端可以驱动路由的页面有限，但这是一个非常干净和动态的实现。

从另一方面来说，我的建议是单独注册路由器页面，因为你将来可能需要任何路由器属性，更不用说与团队合作，这将帮助他们了解项目的路由器页面是如何工作的