vue3路由表顺序和静态路由404问题

[zhang-yin123]

项目是vue3，pigx项目，
这是写死的固定路由

**

• 定义静态路由（默认路由）
• 前端添加路由，请在此处加
  */
  export const dynamicRoutes: Array = [
  {
  path: '/home',
  name: 'router.home',
  component: () => import('/@/views/home/index.vue'),
  meta: {
  isLink: '',
  isHide: false,
  isKeepAlive: true,
  isAffix: true,
  isIframe: false,
  icon: 'iconfont icon-shouye',
  },
  },
  {
  path: '/personal',
  name: 'router.personal',
  component: () => import('/@/views/admin/user/personal.vue'),
  meta: {
  isHide: true,
  },
  },
  ];

/**

• 定义静态路由（默认路由）
  */
  export const staticRoutes: Array = [
  {
  path: '/login',
  name: 'staticRoutes.login',
  component: () => import('/@/views/login/index.vue'),
  meta: {
  isAuth: false,
  },
  },
  {
  path: '/authredirect',
  name: 'staticRoutes.authredirect',
  component: () => import('/@/views/login/component/authredirect.vue'),
  meta: {
  isAuth: false,
  },
  },
  {
  path: "/noAuth/eap/basic/dictSetting/index",
  name: 'staticRoutes.dictSetting',
  meta: {
  isAuth: false,
  },
  component: () => import("/@/views/eap/basic/dictSetting/index.vue")
  }
  ];

/**

• 定义404、401界面
  /
  export const notFoundAndNoPower = [
  {
  path: '/:path(.)*',
  name: 'staticRoutes.notFound',
  component: () => import('/@/views/error/404.vue'),
  meta: {
  isHide: true,
  },
  },
  {
  path: '/401',
  name: 'staticRoutes.noPower',
  component: () => import('/@/views/error/401.vue'),
  meta: {
  isHide: true,
  },
  },
  ];

/**

• 基础性路由
• 所有节点都是挂载此节点下
  */
  export const baseRoutes: Array = [
  {
  path: '/',
  name: '/',
  component: () => import('/@/layout/index.vue'),
  redirect: '/home',
  meta: {
  isKeepAlive: true,
  },
  children: [],
  },
  ];

创建路由

export const router = createRouter({
history: createWebHashHistory(),
routes: [ ...staticRoutes,...notFoundAndNoPower],
});

在路由的全局守卫添加动态路由
router.beforeEach(async (to, from, next) => {
NProgress.configure({ showSpinner: false });
if (to.name) NProgress.start();
const token = Session.getToken();
if (to.meta.isAuth !== undefined && !to.meta.isAuth) {
const routeStore = useRoutesList();
routeStore.setStopBackLogin(true);
next();
NProgress.done();
} else {
if (!token) {
next(/login?redirect=${to.path}&params=${JSON.stringify(to.query ? to.query : to.params)});
Session.clear();
NProgress.done();
} else if (token && to.path === '/login') {
next('/home');
NProgress.done();
} else {
const storesRoutesList = useRoutesList(pinia);
storesRoutesList.setStopBackLogin(false);
const { routesList } = storeToRefs(storesRoutesList);
if (routesList.value.length === 0) {
// 后端控制路由：路由数据初始化，防止刷新时丢失
await initBackEndControlRoutes();
next({ path: to.path, query: to.query });
} else {
next();
}
}
}
});

将后端返回的路由全部挂到baseRoutes的"/"下，输出router.getRoutes返回的路由自动排序了，应该是按照path中"/"的数量排序，我搜索了整个项目没有发现手动排序的地方，这是vue排序吗，那我怎么控制路由的顺序呢？嵌套路由的子路由也被拆除变成一级路由也被排序了
而且静态路由的name不可以写中文否则跳转就会匹配到/:path(.)，可是404后刷新又好了，很奇怪，动态路由添加后name也是中文，从动态路由跳转静态就会404

[zhang-yin123]

这是输出的router.getROutes截图

可以看到静态路由的最后一个在整个路由的最前面，我修改了path确实会影响排序

[Alfred-Skyblue]

It seems like it's caused by the order of addition, with dynamic routes being added after the 404 route, resulting in a match with the 404. However, you should consult Vue Router for your specific question.