Nuxt3自定义部分模块路由

项目场景：

Nuxt3项目中，部分页面的路由需要改成特定的路由名称显示

---

问题描述

由于Nuxt3的路由生成规则，例如创建了page-cart-index.vue的目录，那么生成的路由就会是/cart,但是现在需要将/cart的路由路径展示改成user-cart，我尝试过将文件夹名称直接改为user-cart,虽然达到了效果，但是感觉这样命名文件夹很怪，而且对应的index.vue里面使用const router = useRouter()，ts会报警告，虽然不影响功能，但是会很不舒服，所以走自定义路由方向。

相关截图说明：
改之前：

改之后：(文件夹改成这种带横线的，useRouter会报警告，但是不影响功能)

虽然功能生效，但是这种警告怪怪的，所以放弃以上方式。

解决方案（两种）：

文件夹还是cart名称，不修改文件夹名称为user-cart, 通过自定义路由来达成目的，研究了下官方文档后，有如下两种方案：①根目录下创建app/router.options.ts ②配置nuxt.config.ts文件

• 方案①：根目录下创建app/router.options.ts

// 不删除文件夹默认生成的路由，则会/cart和/user-cart都可以跳转到购物车，
// 跳转逻辑肯定是写的/user-cart，但是如果手动输入/cart的也会跳转到购物车，因为该路由是存在的
import type { RouterConfig } from "@nuxt/schema";
const customRoutes = [
  {
    name: "user-cart",
    path: "/user-cart",
    component: () => import("../pages/cart/index.vue"),
  },
];
export default <RouterConfig>{
  routes: (_routes) => {
    return [..._routes,...customRoutes];
  },
};
// 删除文件夹默认生成的cart路由
import type { RouterConfig, NuxtPage } from "@nuxt/schema";
const customRoutes = [
  {
    name: "user-cart",
    path: "/user-cart",
    component: () => import("../pages/cart/index.vue"),
  },
];
export default <RouterConfig>{
  routes: (routes) => {
    let _routes = [...routes];
    const arr = ["cart"]; // 配置需要删除的路由的名单
    // remove routes
    function removePagesMatching(arr: string[], _routes: any[]) {
      const routeToRemove = [];
      for (const _route of _routes) {
       	// 这块由于cart目录比较简单，简单的包含判断即可，如果遇到复杂的关系自己添加判断
        if (arr.includes(_route.name!)) routeToRemove.push(_route) 
        // else removePagesMatching(name, page.children); // 子路由自己如果遇到去判断处理
      }
      for (const route of routeToRemove )
        _routes.splice(_routes.indexOf(route), 1);
    }
    removePagesMatching(arr, _routes);
    return [..._routes, ...customRoutes];
  },
};

• 方案②： 配置nuxt.config.ts文件

export default defineNuxtConfig({
  ...,
  hooks: {
    // 自定义某个页面路由
    "pages:extend": function (pages) {
      // add a route
      pages.push({
        name: "user-cart",
        path: "/user-cart",
        file: "~/pages/cart/index.vue",
      });
      // 看需不需要pages/cart目录默认生成的路由，不管的话/user-cart和/cart都可以跳转到同一个页面,上面的代码就可以了，如果需要删除掉对应的目录生成的路由，则需要下面的删除操作
      const arr = ["cart"]; // 配置需要删除的路由的名单
      // remove routes
      function removePagesMatching(arr: string[], pages: NuxtPage[] = []) {
        const pagesToRemove = [];
        for (const page of pages) {
          if (arr.includes(page.name!)) pagesToRemove.push(page);
          // else removePagesMatching(name, page.children); // 这块是涉及子路由的，你自己需要操作这块的时候自己去调试代码，我这块不需要暂时不管
        }
        for (const page of pagesToRemove) pages.splice(pages.indexOf(page), 1);
      }
      removePagesMatching(arr, pages);
    },
  },
  ...,
 });