Как добавить маршрут из компоненты в VUE 3 vue-router v.4?

Question

Рустем @h0kum

Vue.js

Как добавить маршрут из компоненты в VUE 3 vue-router v.4?

Добрый день!

Имеется компонента PDFTools которая отображает пункты меню для перехода на конкретный инструмент.
маршрутизатор инициализируется стандартно:

import { createRouter, createWebHistory } from 'vue-router'
//...

const routes = [
  {
    path: '/',
    component: Index,
  },
  {
    name: 'PDFTools',
    path: '/pdftools',
    component: pdfTools,
  },
...
 {
    name: 'PDFMerge',
    path: '/pdftools/merge',
    component: PDFMerge,
  },
  {
    path: '/pdftools/remove',
    name: 'PDFRemove',
    component: PDFRemove,
  },
  { path: '/:path(.*)', component: NotFound },
]
const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

Здесь проблем нет, с пунктов меню на инструменты переходит без проблем.

Что бы не нагромождать в этом файле маршрутами, хочу перенести (и прочие):

{
    name: 'PDFMerge',
    path: '/pdftools/merge',
    component: PDFMerge,
  },
  {
    path: '/pdftools/remove',
    name: 'PDFRemove',
    component: PDFRemove,
  },

в компоненту PDFTools.vue

<script type="ts">
import { defineComponent } from "vue"
import {useRouter, useRoute} from "vue-router"

// здесь лежит массив с маршрутами export const PDFToolsMenu: RouteRecordRaw[] =
import { PDFToolsMenu } from "@/pages/pdfTools/config" 

const pdfTools = defineComponent ({
  name: 'PDFTools',
  setup(){
    const menu = PDFToolsMenu
    const router = useRouter()
      PDFToolsMenu.map((route) => {
        router.addRoute(route)
      })
      console.log(router.getRoutes())
    })
...

вывод в консоль показывает наличие новых маршрутов.

0: {path: "/about/", redirect: undefined, name: undefined, meta: {…}, aliasOf: undefined, …}
1: {path: "/pdftools/merge", redirect: undefined, name: "PDFMerge", meta: {…}, aliasOf: undefined, …}
2: {path: "/pdftools/remove", redirect: undefined, name: "PDFRemove", meta: {…}, aliasOf: undefined, …}
3: {path: "/pdftools/split", redirect: undefined, name: "PDFSplit", meta: {…}, aliasOf: undefined, …}
4: {path: "/pdftools/convert", redirect: undefined, name: "PDFConvert", meta: {…}, aliasOf: undefined, …}
5: {path: "/pdftools/compress", redirect: undefined, name: "PDFCompress", meta: {…}, aliasOf: undefined, …}
6: {path: "/", redirect: undefined, name: undefined, meta: {…}, aliasOf: undefined, …}
7: {path: "/viewer", redirect: undefined, name: "PDFViewer", meta: {…}, aliasOf: undefined, …}
8: {path: "/pdftools", redirect: undefined, name: "PDFTools", meta: {…}, aliasOf: undefined, …}
9: {path: "/:path(.*)", redirect: undefined, name: undefined, meta: {…}, aliasOf: undefined, …}

если посмотреть в vue devtools во вкладке Routes маршруты так же имеются,
но если попробовать перейти по ссылке то уходит по пути
{ path: '/:path(.*)', component: NotFound },

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