Как убрать дубликат маршрута?

Question

[Игорь]

Как убрать дубликат маршрута?

Я использую именованный анонимный маршрут administrator_organizations_list
Эта конструкция, которую я привожу ниже, создаёт дубликат маршрутов, разница лишь в косой черте.
Можно было бы избавится от последнего маршрута который я привожу на изображении.

Вопрос, как это сделать?

1. В мета данных как то обозначить нерадивый маршрут, а потом убрать из breadcrumbs
2. Ваш вариант ))

Маршруты

{
    path: '/administrator',
    name: 'administrator',
    component: () => import(/* webpackChunkName: "administrator" */ '../views/Administrator/Layout.vue'),
    children: [
      {
        path: 'organizations',
        component: () => import(/* webpackChunkName: "administrator-organizations" */ '../views/Administrator/Organizations/Layout.vue'),
        children: [
          {
            path: '',
            name: 'administrator_organizations_list',
            component: () => import(/* webpackChunkName: "administrator-organizations-list" */ '../views/Administrator/Organizations/List.vue'),
            meta: {
              layout: 'administrator',
              middleware: []
            }
          }
        ],
        meta: {
          layout: 'administrator',
          middleware: []
        }
      },
      {
        path: 'settings',
        name: 'administrator_settings',
        component: () => import(/* webpackChunkName: "administrator-settings" */ '../views/Settings/Layout.vue'),
        children: [
          {
            path: 'profile',
            name: 'administrator_profile',
            component: () => import(/* webpackChunkName: "administrator-settings-profile" */ '../views/Settings/Profile.vue'),
            meta: {
              layout: 'default',
              middleware: []
            }
          },
          {
            path: 'journal',
            name: 'administrator_journal',
            component: () => import(/* webpackChunkName: "administrator-settings-journal" */ '../views/Settings/Journal.vue'),
            meta: {
              layout: 'default',
              middleware: []
            }
          },
          {
            path: 'security',
            name: 'administrator_security',
            component: () => import(/* webpackChunkName: "administrator-settings-security" */ '../views/Settings/Security.vue'),
            meta: {
              layout: 'default',
              middleware: []
            }
          },
          {
            path: 'telephony',
            name: 'administrator_telephony',
            component: () => import(/* webpackChunkName: "administrator-settings-security" */ '../views/Settings/Telephony.vue'),
            meta: {
              layout: 'default',
              middleware: []
            }
          },
          {
            path: 'headset-configure',
            name: 'administrator_headset_configure',
            component: () => import(/* webpackChunkName: "administrator-settings-headset-configure" */ '../views/Settings/HeadsetConfigure.vue'),
            meta: {
              layout: 'default',
              middleware: []
            }
          }
        ],
        beforeEnter (to: Route, from: Route, next: NavigationGuardNext) {
          // todo: Solve the question of how we will change the locale
          loadLanguageAsync('ru', 'settings').then(() => next())
        },
        meta: {
          layout: 'default',
          middleware: []
        }
      }
    ],
    meta: {
      layout: 'administrator',
      middleware: [role]
    },
    beforeEnter (to: Route, from: Route, next: NavigationGuardNext) {
      // todo: Solve the question of how we will change the locale
      loadLanguageAsync('ru', 'administrator').then(() => next())
    }
  }

Итог


Пока подставил костыль

Костыль

computed: {
    breadcrumbs (): CrumbInterface[] {
      /* eslint-disable */
      const crumbs: CrumbInterface[]  = []
      if (this.$route.path !== '/') {
        crumbs.push({
          path: '/',
          name: 'home',
          title: this.$i18n.tc('route.home'),
          class: '',
          latest: false
        })
      }
      // @ts-ignore
      this.$route.matched.forEach((item: any, i: number, {length}) => {
        if (item.meta.anonymous) {
          return
        }
        const crumb: CrumbInterface = {
          class: '',
          name: item.name,
          path: item.path,
          title: '',
          latest: false
        }
        crumb.path = item.path
        // @ts-ignore
        crumb.title = this.$i18n.tc('route.' + (item.name || item.path.replace(/^\//s, '').replace(/\//s, '')))
        // is last item?
        if (i === length - 1) {
          // is param route? .../.../:id
          // if (item.regex.keys.length > 0) {
          //   crumbs.push({
          //     path: item.path.replace(/\/:[^/:]*$/, ''),
          //     name: item.name,
          //     title: this.$i18n.tc('route.' + item.name.replace(/-[^-/]*$/, '')),
          //     class: '',
          //     latest: false
          //   })
          //   // @ts-ignore
          //   crumb.path = this.$route.path
          //   // @ts-ignore
          //   crumb.title = this.$i18n.tc('route.' + this.$route.name, [
          //     // @ts-ignore
          //     crumb.path.match(/[/]*$/)[0]
          //   ])
          // }
          crumb.class = 'is-active'
        }

        crumb.title = crumb.title.replace(/[/]/, '')
        crumbs.push(crumb)
      })
      if (crumbs.length > 1) {
        crumbs[crumbs.length - 1].latest = true
      }
      return crumbs
      /* eslint-enable */
    }
  }

Comments

[Даша Циклаури]

проблема на бэкэнде (сервер сайд рендеринг) или на фронтенде?
можно на nginx прописать правило чтобы тримал все trailing slash и редиректил + каноникал в мета тэг

[Игорь]

Даша Циклаури, SPA

[Даша Циклаури]

Игорь, это понятно, спа может рендериться на сервере, читать про Server Side Rendering , это если ты мета тэги делаешь не просто так, а для поисковиков/соцсетей и тп

[Игорь]

Даша Циклаури, SPA не рендерится на сервере

это понятно, спа может рендериться на сервере, читать про Server Side Rendering

SPA исполняются в рамках браузера.
Это к слову.

Но речь не об этом.
Вы понимаете что означает именованный анонимный маршрут?

[Даша Циклаури]

Игорь, ликбез по SPA
https://docs.adobe.com/content/help/en/experience-...

ответ на твой вопрос, чтобы не реагировал на trailing slash нужно добавить exact для маршрута,
https://router.vuejs.org/api/#exact

[Игорь]

Даша Циклаури,

https://router.vuejs.org/api/#exact

Последняя ссылка, спасибо.

[Игорь]

Даша Циклаури,

ликбез по SPA
https://docs.adobe.com/content/help/en/experience-...

Причём здесь adobe?
Мой SPA точно не работает на сервере.

[Игорь]

Даша Циклаури,

ответ на твой вопрос, чтобы не реагировал на trailing slash нужно добавить exact для маршрута,

Эмм... Это врятли удалит лишний дубликат.

Обратите внимание га изображение


Список организаций и Организации одно и тоже.

Схема такова:

Это то что мне нужно
home/organizations
home/organizations/new
home/organizations/323