vue3 router 配置跟vue2不一样

vue2 的404页面直接写在routes数组的最后一项, vue3, 如果用过addRoute, 那么不能写在routes数组, 需要使用addRoute来加

router.beforeEach(async (to, from, next) => {


  const hasToken = localStorage.getItem('token')

  const hasUserInfo = !!(
    userInfoStore.games.value.length ||
    userInfoStore.channels.value.length ||
    userInfoStore.permissions.value.length
  )

  if (to.path !== from.path) NProgress.start()



  if (!hasToken) {
    if (to.path === '/login') {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  } else {
    if (to.path.includes('/login')) {
      next({ name: 'root' })
    } else {
      if (hasUserInfo && reportsStore.loaded) {
      

        next()
      } else {
      

        try {
          await Promise.all([
            
            myFetch('/configs').then(({ data: { data } }) => {
              const filtered = data.filter((item) => item.key === 'report')
              const app = data.find((item) => item.key === 'app')?.config
              if (app) {
                appState.value = app
              }

              reportsStore.reports = filtered
              reportsStore.loaded = true
              filtered.forEach((element) => {
                const record = {
                  path: `${element.config.name}`,
                  name: element.config.name,
                  component: () => import('@/pages/自定义报表/z/index.vue'),
                  meta: {
                    icon: 'pi pi-fw pi-money-bill',
                  },
                }
                   // 使用过addRoute 
                router.addRoute('自定义报表', record)
                
                 // 就需要使用addRoute来添加
                router.addRoute({
                  path: '/:path(.*)*',
                  name: 'Page404',
                  component: () => import('@/pages/error/404.vue'),
                  meta: {
                    title: 'ErrorPage',
                    hideBreadcrumb: true,
                    hideMenu: true,
                  },
                  children: [
                    {
                      path: '/:path(.*)*',
                      name: 'Page404',
                      component: () => import('@/pages/error/404.vue'),
                      meta: {
                        title: 'ErrorPage',
                        hideBreadcrumb: true,
                        hideMenu: true,
                      },
                    },
                  ],
                })
              
              })
            }),
            
          ])

          next({ ...to, replace: true })
        } catch (err) {
          console.error(err)
          localStorage.removeItem('token')
          localStorage.removeItem('refresh_token')

          next(`/login?redirect=${to.path}`)
        }
      }
    }
  }
})
router.afterEach(() => {
  NProgress.done()
  // Dismiss all toasts
  toast.clear()
})