Vue中的组件相同但Url路径不同

Question

我希望同一组件SingleProduct有不同的url(消费者和卖家(，以下代码运行良好：

const routes = [
{
path: "/:name",
name: "SingleProductSeller",
component: SingleProduct
},
{
path: "/seller/:name",
name: "SingleProductConsumer",
component: SingleProduct,
},
]

除了一分为二，还有其他方法吗？例如，是否可以使用以下参数创建别名以及如何创建别名？

{
path: "/:name",
name: "SingleProduct",
component: SingleProduct,
alias: "/seller/:name/",
props: true,
},

谢谢。

Answer 1

您可以使用vue路由器的alias功能。文档中对此进行了很好的解释。

但是，如果可能的话，您应该避免这种情况，因为您使用的是动态路径片段，并且这在概念上是两个不同的路由，因此即使它们指向同一组件，也应该是不同的路由。您将遇到书签问题-页面不会转换到相同的路径，即使它们只是别名。

如果你真的想避免DRY，你应该使用简单的基于函数的抽象，而不是依赖别名：

function makeSingleProductRoute(name, path) {
return {
name, path,
component: SingleProduct
// Reusable guards if required.
};
}

const router = new VueRouter({
routes: [
makeSingleProductRoute("SingleProductConsumer", "/seller/:name"),
makeSingleProductRoute("SingleProductSeller", "/:name")
]
});