nuxt3获取当前应用的所有路由:

1.通过RoutesNamesList获取类型

表示命名路由的列表
是命名路由的键组成的联合类型（如 'home' | 'user'）。

// Example
type RoutesNamesList = "home" | "user";

实际使用:
import type { RoutesNamesList } from "@typed-router"; // 在nuxt3框架下，会自动生成相关的路由，不需要自己处理

2.通过vue-router的router获取

const router = useRouter();//vue-router的组合函数
console.log(router.getRoutes().map((r) => r.name)); // 打印所有路由名称
  
const routeNames = router.getRoutes().map((route) => route.name).filter(Boolean); //filter 过滤掉无效值
console.log(routeNames);
  
//验证 filter(Boolean) 的作用
const routes = [
  { name: "home" },
  { name: "about" },
  { name: undefined },
  { name: "user" },
];
  
const routeNames = routes.map((route) => route.name);
console.log(routeNames);
// 输出: ["home", "about", undefined, "user"]
  
const filteredRouteNames = routes.map((route) => route.name).filter(Boolean);
console.log(filteredRouteNames);
// 输出: ["home", "about", "user"]

拓展两个重要的路由信息:

import type { RoutesNamedLocations, RoutesNamesList } from "@typed-router";

在 Nuxt 3 中使用 @typed-router，通过 RoutesNamedLocations 和 RoutesNamesList 来定义和操作类型化的路由，是一种更安全和可维护的方式。以下是对这两个类型的简要说明和如何使用它们的例子：

类型说明

1. RoutesNamedLocations
   表示命名路由的参数和查询参数类型的映射。
   每个命名路由都有相应的路径参数和查询参数的类型定义。

   // Example
   type RoutesNamedLocations = {
     home: {}; // 无参数的路由
     user: { params: { id: string }; query?: { referrer?: string } }; // 有路径和查询参数的路由
   };
   

2. RoutesNamesList
   表示命名路由的列表。
   是命名路由的键组成的联合类型（如 'home' | 'user'）。

   // Example
   type RoutesNamesList = "home" | "user";
   

---

如何在代码中使用

示例：跳转到命名路由

你可以在代码中使用 RoutesNamedLocations 和 RoutesNamesList 提供的类型化支持：

import { useTypedRouter } from "@typed-router";
import type { RoutesNamedLocations } from "@typed-router";

export default defineComponent({
  setup() {
    const router = useTypedRouter();

    // 跳转到具体的命名路由
    const goToUser = () => {
      const userRoute: RoutesNamedLocations["user"] = {
        params: { id: "123" },
        query: { referrer: "google" },
      };

      router.push({
        name: "user", // 类型安全的路由名
        ...userRoute,
      });
    };

    return { goToUser };
  },
});

示例：获取当前路由信息

通过 RoutesNamesList 确保访问的命名路由是有效的：

import { useTypedRoute } from "@typed-router";
import type { RoutesNamesList } from "@typed-router";

export default defineComponent({
  setup() {
    const route = useTypedRoute();

    // 当前路由是否是 "user"
    const isUserRoute = computed(() => {
      return route.name === "user" as RoutesNamesList; // 类型安全
    });

    return { isUserRoute };
  },
});

---

优势

1. 类型安全：避免拼写错误导致的运行时问题。
2. 自动补全：在 IDE 中提供命名路由的自动补全功能。
3. 更好维护性：如果路由参数或命名路由发生变更，编译器会提示更新相关代码。

如果你需要进一步扩展，请提供更多具体的路由配置或使用场景！