vue3动态路由配置404页面vue3中使用vue-ruoter配置路由，跳转到不存在的页面时会显示空白，为了优化用户体

vue3中使用vue-ruoter配置路由，跳转到不存在的页面时会显示空白，为了优化用户体验，我们要在路由跳转失败时跳转到自定义的404页面

由于路由表是由上至下匹配的，一定要将任意匹配规则至于最底部，否则至于此路由规则下的路由将全部跳转至404，无法正确匹配。

而路由表是动态生成的，在此情况下，需要在动态路由注入后，再注入重定向规则，以确保该规则至于路由表最底部

{
    path: '/:cathchAll(.*)',
    name: '404',
    meta: {
      Title: '404'
    },
    component: () => import('@/views/basic/notFound')
}

const routes = [
  {
    path: '/basic/login',
    name: 'Login',
    meta: {
      title: '登录'
    },
    component: () => import('@/views/basic/login')
  }
  // 动态路由
  // 404路由
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})