Vue routing report [vue-router] Duplicate named routes definition

There are two solutions here:

1. Check whether there is a route with the same name, such as the following:

{
    path: '/storage-pool',
    name: 'storagePool',   // name 1
    component: Layout,
    children: [
      {
        path: 'drag-table',
        name: 'DragTable', // name 2
        meta: { title:'' },
        component: () => import('@/views/storage-pool/storage-pool/index')
      }
    ]
  },
{
    path: '/pool',
    name: 'storagePool', // name 3
    component: Layout,
    children: [
      {
        path: 'drag-table',
        name: 'DragTable2', // name 4
        meta: { title: ''},
        component: () => import('@/views/storage-pool/storage-pool/index')
      }
    ]
  },

The above demo includes a total of 4 name values ​​including sub-routes, among which name1 and name3 are duplicated. This will generate a Duplicate named routes definition warning.

Solution:

The solution to static routing is very simple, just adjust the name so that all names are not repeated.

For example, set the above names to name: 'storagePool', name: 'DragTable', name: 'storagePool2', name: 'DragTable2'

2. If you find that your name does not have the same name, it is usually an error warning caused by background dynamic routing. Dynamic routing generally returns the data through the backend interface, and then adds it in the routing guard router.beforeEach.

router.beforeEach(async(to, from, next) => {
  if (to.name === 'storageNew') {
    getAside().then(res => {
      router.addRoutes(res)
      next()
    })
  } else {
    next()
  }
})

The warning Duplicate named routes definition will also appear when the above demo runs. The focus here is the method addRoutes, because: The addRoutes method only injects new routes for you, and does not help you eliminate other routes.

Solution:

Write this code in router/index.js:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const createRouter = () => new Router({
mode: 'history',
routes: []
})

const router = createRouter()

export function resetRouter () {
const newRouter = createRouter()
router.matcher = newRouter.matcher // the relevant part
}

export default router

Then do the following:

import { resetRouter } from  router/index.js

router.beforeEach(async(to, from, next) => {
  if (to.name === 'storageNew') {
    getAside().then(res => {
      resetRouter() // 重置路由
      router.addRoutes(res)
      next()
    })
  } else {
    next()
  }
})

Refresh the page to find that the warning has disappeared. Because of the routing authority system I am in charge of, router.addRoutes(res) is only executed once, so the above solution works.

If some small partners’ code jumps to dynamic routing and executes router.addRoutes(res) multiple times, then refer to the following article to solve it. Vue routing warning Duplicate named routes definition