相同组件，但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-router的alias功能。在docs中有很好的解释。

但是，由于要使用动态路径片段，因此应尽可能避免这种情况，并且从概念上讲这是两条不同的路线，因此即使它们指向相同的组件，也应是不同的路线。您将遇到书签问题-即使它们只是别名，页面也不会转换到相同的路径。

如果确实要避免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")
    ]
});