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

Question

我想为同一个组件 SingleProduct 设置不同的 url(Consumer 和 Seller)，以下代码效果很好：

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")
    ]
});