vue-router.js?v=408f3477:974 Uncaught Error: Catch all routes (“*“) must now be defined using a para

这个错误提示来自于 Vue Router 的一个更新，特别是从 Vue Router 3 到 Vue Router 4（通常与 Vue 3 一起使用）的迁移过程中。在 Vue Router 4 中，全局捕获（或称为“通配符”路由）的定义方式发生了改变。在 Vue Router 3 中，你可能会使用 * 作为路径来定义一个捕获所有不匹配其他路由的路由，但在 Vue Router 4 中，这种方式已经被移除。

解决方案

在 Vue Router 4 中，如果你想要定义一个通配符路由，你需要使用带有自定义正则表达式的参数。这里是一个如何做到这一点的例子：

import { createRouter, createWebHistory } from 'vue-router';  
  
const routes = [  
  // 其他路由定义...  
  {  
   path: '/:catchAll(.*)',  
   name: 'NotFound',  
   component: () => import('./views/NotFound.vue')  
  }
];  
  
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes  
});  
  
export default router;

当所有路由都不匹配时弹出404页面

    {  
       path: '/:pathMatch(.*)',  
       name: 'NotFound',  
       component: () => import('../views/NotFind.vue')  
    },

    // {  
      //  path: '/:catchAll(.*)',  
      //  name: 'NotFound',  
      //  component: () => import('../views/NotFind.vue')  
    // },