Ошибка определения дублированных именованных маршрутов, даже если имена всех дочерних маршрутов различны

Question

Я получаю эту ошибку [vue -router] Дублирование определения именованных маршрутов: даже если у меня разные имена маршрутов. Я пытался найти эту проблему в stackoverflow и Google, но не смог найти решение этой проблемы.

Мой маршрут. js файл.

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainDashboard.vue'),
    children: [
      {
        path: '', name: 'LandingPage', component: () => import('pages/LandingPage.vue'), meta: { requiresAuth: false }
      },
      {
        path: '/product_details/:productId', name: 'ProductDetails', component: () => import('pages/ProductDetails.vue'), meta: { requiresAuth: false }
      },
      { path: '/cart', name: 'Cart', component: () => import('../cart/ShoppingCart.vue'), meta: { requiresAuth: false } },
      { path: '/checkout', component: () => import('../cart/CheckoutComponent.vue'), meta: { requiresAuth: true } },

      { path: '/page/:cardTitle', component: () => import('../pages/ProductListPage.vue'), meta: { requiresAuth: false } },
      { path: '/account', name: 'Account', component: () => import('../account/AccountComponent.vue'), meta: { requiresAuth: false } },
      {
        path: '/accounttype', component: () => import('../account/AccountType.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/orders', component: () => import('../account/Orders.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/address', component: () => import('../account/Address.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/addAddress', component: () => import('../account/AddAddress.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/loginSecurity', component: () => import('../account/LoginSecurity.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/wishLists', component: () => import('../account/WishLists.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/requestProduct', name: 'RequestProduct', component: () => import('pages/RequestProduct.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/trackYourOrder', name: 'OrderTracker', component: () => import('pages/OrderTracker'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/sell', name: 'Sell', component: () => import('pages/Sell.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/help', name: 'Help', component: () => import('pages/Help.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/contact', name: 'Contact', component: () => import('pages/Contact.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/vouchers', component: () => import('pages/Vouchers.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/customerCare', component: () => import('../components/CustomerCare.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/dailyGroceries', component: () => import('../components/DailyGroceries.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/stores', component: () => import('../components/Stores.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/searchResult', component: () => import('../pages/SearchResult.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/categories', name: 'Categories', component: () => import('../pages/Categories.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/categories/:categoryName', component: () => import('../pages/CategoriesListPage.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/history', component: () => import('../pages/BrowsingHistory.vue'), meta: { requiresAuth: false }, props: true
      },
      {
        path: '/notifications', name: 'Notifications', component: () => import('pages/Notifications.vue'), meta: { requiresAuth: false }, props: true
      }
    ]
  }
]

// Always leave this as last one
if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

Пожалуйста, предложите что здесь не так. Пожалуйста, обратитесь к приложенному снимку. Как видите, он показывает ошибку для маршрутов, даже если названия маршрутов различны.

Vue Код создания маршрутизатора:

индекс. js

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)

export default function (/* { store, ssrContext } */) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,

    // Leave these as is and change from quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    // mode: 'history',
    base: process.env.VUE_ROUTER_BASE
  })
  return Router
}