即使所有子路由名称不同，命名路由定义重复也会出错

Question

我收到此错误 [vue-router] 重复命名路由定义：即使我有不同的路由名称。我尝试在 * 和 google 中搜索此问题，但找不到此问题的解决方案。

我的 route.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 路由器创建代码：

index.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
}

Answer 1

删除属性name，此消息不再显示。

例如：

{ path: '/cart', component: () => import('../cart/ShoppingCart.vue'), meta: { requiresAuth: false } }