Why is it throwing a 404 error when going to router vue?

Question

Vue.js

Hello. Faced a problem.
I have a component with a recursive call to itself. (building a sidebar )
Clicking in the sidebar happens My router looks like thisthis.$router.push('/Structure/Items')

const routes = [
  {
    path: '/',
    component: () => import('src/layouts/Platform.vue'),
    children: [
      { path: '', component: () => import('pages/Main.vue') },
      { path: '/:sub/:formName', component: () => import('pages/Main.vue') }
    ]
  },
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

So it keeps giving me a 404 error.
If I make a transition to, for example, the main page or to any other active page, everything will work.
But the push does not go to the one that I do.
What could be the problem, what should I pay attention to?

Answer 1

Hey!
I advise you to pay attention to the second line children, there are sub and formName props here, but the route needs to be given permission to use them:

{ path: '/:sub/:formName', component: () => import('pages/Main.vue'), props: true }