nuxt3之自动生成路由以及类型

nuxt3之自动生成路由以及类型:
1> 缘起在使用nuxt3开发项目的时候，一般不需要自己定义路由的，框架会自动根据页面(pages)目录生成相关的路由信息这需要安装特定的包: nuxt-typed-router

2> 使用以及分析

import type { RoutesNamedLocations, RoutesNamesList } from "@typed-router";
  
// 分析
RoutesNamesList的作用:
RoutesNamesList 是从 @typed-router 库中导入的类型，其主要作用是定义项目中所有路由名称的字符串集合。它通常用于为项目中的路由名称提供类型检查，确保代码在访问路由时使用的名称是有效且类型安全的。
  
具体作用：
1.限制路由名称：
RoutesNamesList 的作用是限制开发者只能使用预定义的路由名称。这可以防止在代码中使用不存在或拼写错误的路由名称，减少运行时错误的可能性。
  
2.自动补全和类型检查：
当你使用 RoutesNamesList 作为路由名称的类型时，IDE 会为你提供自动补全功能，并在你尝试使用无效的路由名称时发出警告。这大大提高了开发效率和代码的可靠性。
  
3.路由名称集中管理：
使用 RoutesNamesList 可以集中管理项目中的所有路由名称，使得项目结构更清晰。如果需要添加、删除或重命名某个路由，更新这个类型定义可以使整个项目统一反映这个变化。
  
示例说明：
假设 RoutesNamesList 的定义类似如下：
1.假设 RoutesNamesList 的定义类似如下：
type RoutesNamesList = "home" | "about" | "contact";
  
当使用 RoutesNamesList 作为类型时，只能使用 home、about 或 contact 作为合法的路由名称
  
let routeName: RoutesNamesList;

routeName = "home";    // 合法
routeName = "contact"; // 合法
routeName = "login";   // 错误，"login" 不在 RoutesNamesList 中
  
//重命名路由
export { type RoutesNamesList as AppRouteList } from "@typed-router";
这里将 RoutesNamesList 重新导出为 AppRouteList，这样项目中的其他部分可以使用 AppRouteList 来作为路由名称的类型。它确保了任何使用该类型的地方都只能使用预定义的路由名称。


// 分析
RoutesNamedLocations的作用
RoutesNamedLocations 是从 @typed-router 导入的另一个类型，通常用于定义与路由名称相关的具体路由对象。它不仅包含了路由的名称，还可以包含路由参数、查询参数等信息，帮助你以类型安全的方式构建路由对象。
  
具体作用：
1.类型安全的路由导航：
RoutesNamedLocations 的作用是为你提供类型化的路由对象，用于路由导航。这样你在生成路由路径时，不仅能指定路由名称，还可以确保传入的参数符合该路由的要求（如动态参数或查询参数）。
  
2.参数类型检查：
对于带有动态参数的路由，RoutesNamedLocations 允许你通过类型来明确要求的参数。例如，如果某个路由需要一个 id 参数，这个类型会强制你在导航时提供 id，否则会抛出编译错误，确保导航的路径和参数是正确的。
  
3.导航时的自动补全：
使用 RoutesNamedLocations 作为路由对象的类型时，IDE 可以为你提供智能提示，自动补全路由名称以及相关的参数。这使得在编写导航代码时，不仅能快速选择正确的路由，还能避免传递错误或缺失的参数。
  
示例说明：
假设你有一组路由配置，比如：
// 假设的路由配置
type RoutesNamedLocations = {
  home: {};
  about: {};
  user: { params: { id: string }; query?: { referrer?: string } };
};
  
home 和 about 路由没有参数要求，而 user 路由需要一个 id 参数，并且可以有一个可选的 query 参数 referrer。
  
你可以这样使用：
let route: RoutesNamedLocations;

// 合法：没有参数要求
route = { name: "home" };
route = { name: "about" };

// 合法：提供了必需的参数
route = { name: "user", params: { id: "123" } };

// 合法：还可以包含可选的查询参数
route = { name: "user", params: { id: "123" }, query: { referrer: "homepage" } };

// 错误：缺少 id 参数
route = { name: "user" }; // TypeScript 报错
  
// 混合使用
export type AppGenericRoute = RoutesNamedLocations | string;
AppGenericRoute 可以是类型化的 RoutesNamedLocations，也可以是简单的字符串。这意味着在某些场景下你可以使用类型化路由，也可以只使用字符串形式的路由名称。

3> 说明

1.独立使用 @typed-router：如果你不使用 Nuxt.js，而是一个普通的 Vue Router 项目，可以直接安装和使用 @typed-router 来为项目添加类型安全的路由支持。
  
2.在 Nuxt.js 中在安装了 nuxt-typed-router之后，你不需要直接安装 @typed-router，因为 nuxt-typed-router 已经基于它构建并提供了所有功能。