具有动态生成别名的 Vue-Router（也是 SSR）答案

【问题标题】：Vue-Router with dynamically generated aliases (also SSR)具有动态生成别名的 Vue-Router（也是 SSR）
【发布时间】：2020-08-27 16:05:28
【问题描述】：

我们的业务逻辑允许不同类型的个人资料页面（用户个人资料、公司个人资料等 - 每个都有自己的模板），但网址不区分个人资料的类型。所有 URL 的格式为：

mysite.com/{{ profile-vanity-alias }}

vue-router 配置如何确定要渲染的组件？例如

mysite.com/zuckerberg 应该呈现一个用户个人资料页面
mysite.com/facebook 应该呈现一个公司简介页面
mysite.com/jeffbezos 不存在，因此它应该呈现 404
mysite.com/companies/usa 应该呈现一个包含美国公司列表的不同页面（/companies/:country? 是可以硬编码的已知路线）

此外，我们还在考虑使用vue-ssr（用于搜索引擎优化）；我从来没有真正使用过 SSR，所以我不知道从哪里开始 - 一些建议会非常有帮助！

谢谢！

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

您可以使用切换逻辑来确定您需要加载哪个组件，然后动态加载该组件。

<component v-bind:is="component" />

也许您可以通过本文详细了解。 https://blog.logrocket.com/how-to-make-your-components-dynamic-in-vue-js/

【讨论】：

这没有帮助。问题是如果所有 url 几乎相同（mysite.com/{{ some-slug }}），vue-router 将如何决定加载哪个页面。

【解决方案2】：

路由路径显然类似于/:profile。我将有一个通用父组件来响应该路由并加载相应的配置文件对象（来自 API 等），并且基于某些标志或其他标准，它显示个人或公司之一的配置文件组件 -在这里，一个动态组件可能会起作用。作为一个简短的草图，在父组件中我会有：

<div>
   <user-profile v-if="currentObject.isUser" :id="currentObject.id" />
   <company-profile v-if="currentObject.isCompany" :id="currentObject.id" />
</div>

【讨论】：