Vue3.0 dynamic routing No match found for location with path warning solution

When using dynamic route addition in Vue3, since the route addition is asynchronous, the warning will not be matched to the unadded route for the first time, so the 404 will be written in the fixed route to capture the route that was not matched for the first time. There will be no warning, but the 404 will be jumped as soon as it is refreshed.

{
    path: '/404',
    name: '404',
    component: () =&gt; import('@/views/error/'),
    hidden: true,
    meta: { title: "This page cannot be found" }
  },
  {
    path: '/:pathMatch(.*)',
    name: 'notFound',
    hidden: true,
    redirect: '/404',
  },

So you need to judge it inside that userPermissionsStore uses pinia storage routes

    try {
        const permissionsState = userPermissionsStore()

        // Determine whether the addition is successful        // The data is set in ()        if (!) {

          // Get the route to load          const accessRoutes = await ()
          ((item) =&gt; (item)) 
          
          // This is the core code, because if the first match is not matched, it will jump to 404          // So when you jump to 404, do another operation          if ( == '/404' &amp;&amp; ) {
            next({ path: , replace: true })
          } else {
            next({ ...to, replace: true }) // This is equivalent to pushing to a page and not entering route blocking          }
        } else {
          next()   // If the parameters are not passed, the route interception will be performed again and enter here again        }
      } catch (err) {
        next(`/login?redirect=${}`)
      }

Summarize

This is the article about the solution to Vue3.0 dynamic routing No match found for location with path warning. For more related Vue3.0 No match found for location with path warning, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!