Роутинг нескольких страниц на Vue-Router 4

Question

Проблема с настройкой роутинга по страницам в vue-router, в layout есть 3 секции (Левый Sidebar, Основное содержимое, Правый Sidebar). И их содержимое должно зависеть от url по шаблону /{Основная страница} или /{Основная страница}/{Правый Sidebar} или /{Правый Sidebar}

например:

Для url "/news/@user" должен отображать в посередине страницу новостей, а правый Sidebar аккаунт пользователя "user".
Если url будет "/news", то только основное содержимое без Sidebar.
Так же возможен url "/@user", основное сожержимое должно быть пустым, а правый Sidebar отображает аккаунт пользователя "user".

Перепробовал множество вариантов, но не один не сработал должным образом.

С левым Sidebar разобрался, объявляю его в layout.

[
   {
    path: "/",
    component: () => import("layouts/MainLayout"),
    children: [
      {
        path: "news",
        components: {
          default: () => import("pages/news"),
        },
      },
      {
        path: "recommendations",
        components: {
          default: () => import("pages/recommendations"),
        },
      },
      {
        path: "@:nickname",
        components: {
          rightBar: () => import("pages/account"),
        },
      },
   }
]

Усложняется это тем что на мобильной версии 3 секции должны накладываются друг на друга в таком порядке Левый Sidebar->Основное содержимое->Правый Sidebar. Буду благодарен любой помощи, заранее спасибо.

Answer 1

Роутер не должен разбираться в логике построения страницы. Его задача сопоставить путь шаблону, и выдать компонент (перед переходом что-то проверить, но это не к вопросу). У Вас не понятно, чем отличаются /{Основная страница} от /{Правый Sidebar}. Шаблон один и тот же. Вам видимо нужно что-то типа:

[
  {
    path: "/",
    component: () => import("layouts/MainLayout"),
    children: [
        {
          path: "",
          component: () => import("pages/chto-to.vue"),
        },
        {
          path: "recommendations",
          component: () => import("pages/recommendations"),
        },      
        {
          path: "@:nickname",
          component: () => import("pages/account"),      
        },
      ],
  },

  {
      path: "/news/",
      component: () => import("layouts/news"),
children: [
  {
    path: "",
    component: () => import("pages/chto-to-pro-novosti.vue"),
  },
  {
      path: "@:nickname",
      component: () => import("pages/account"),
      },    
    ],
  },
]

А с тем, должен ли показываться сайдбар или нет - пусть разбираются layout и page

БЛОГ НА HUSL

Роутинг нескольких страниц на Vue-Router 4

Ответы (1 шт):