Тот же компонент, но другой URL-путь в Vue

Question

Я хотел бы иметь разные URL (Покупатель и Продавец) для одного и того же компонента SingleProduct, который хорошо работает в следующих кодах:

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

Вы можете использовать alias функцию vue -router . Это хорошо объясняется в документах .

. Однако, если возможно, этого следует избегать, поскольку вы используете dynamici c фрагментов пути , и это два разных маршрута. Концептуально и так должны быть разные маршруты, даже если они указывают на один и тот же компонент. Вы столкнетесь с проблемой закладок - Страница не перейдет на тот же маршрут, даже если они просто псевдонимы .

Если вы действительно хотите избежать 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")
    ]
});