zan-vue-router v1.0.0

zan-vue-router

路由生成器, 将指定目录文件生成vue对应页面路由; 注意: 仅支持 script.setup 语法

支持的路径配置

约定 $ 为参数匹配符, $ 后无任何参数则匹配 *

/bar/detail              # /bar/detail.vue
/bar/detail/:page        # /bar/detail/$page.vue
/foo/:id                 # /foo/$id.vue
/foo/:id/detail/:page    # /foo/$id/detail/$page.vue

动态生成路由说明

布局、页面组件

• 布局组件, 默认为layout.Base, 可选值：layout.Base、layout.Blank
• 页面组件, 以view.为前缀, 后面接组件名称(数据类型为项目中RouteKey), 如view.FooBarGoodsDetailId

路由、页面名称 (name属性)

• 各模块主页面推荐使用index.vue命名, 优先级将高于其他命名, 如: /bar/index.vue, /bar/foo/index.vue
• 由路径+参数+文件名称生成大写驼峰, 如：/foo/:id -> FooId, /foo/GoodsDetail/$id.vue -> FooGoodsDetailId
• name为唯一值, 通过动态配置时必须与此保持一致, 因为生成式路由转换为vue路由时会通过name字段匹配对应的component
• .vue文件中definedOptions.name字段, 为开发、构建时自动注入, 无需手动设置

访问路径

• 由路径+参数+文件名称生成小写kebabCase($ 参考上面约定说明, 参数生成访问路径时不忽略大小写), 如：/foo/GoodsDetail/$Id.vue -> /foo/goods-detail/:Id

文件结构

• _ 下划线开头文件夹或文件, 不会生成路由
• components 目录下文件，不会生成路由

src
└── views
    ├── bar
    │   ├── $foo.vue                            # 访问路径 /bar/:foo
    ├── foo
    │   ├── $bar
    │   │   ├── GoodsDetail
    │   │   │   ├── $projectId.vue              # 访问路径 /foo/:bar/goods-detail/:projectId (优先级低于$id, 无效)
    │   │   │   └── page.vue                    # 访问路径 /foo/:bar/goods-detail/page
    │   │   └── goods-detail.vue                # ❌ 访问路径 /foo/:bar/goods-detail (已存在GoodsDetail目录, 所以不会生成)
    │   └── index.vue                           # 访问路径 /foo/index
    ├── multi
    │   ├── index.vue
    │   └── page                                # 访问路径 /multi/page (children.length > 2, 为多级路由)
    │       ├── bar.vue
    │       └── foo.vue
    └── single
        ├── index.vue
        └── page
            └── bar.vue

生成路由表

[
  {
    "name": "Bar",
    "path": "/bar",
    "component": "layout.Base",
    "meta": {
      "title": "Bar1",
      "icon": "bar-chart"
    },
    "children": [
      {
        "name": "BarFoo",
        "path": "/bar/:foo",
        "component": "view.BarFoo",
        "meta": {
          "title": "edit foo",
          "activeMenu": "Bar"
        }
      }
    ]
  },
  {
    "name": "Foo",
    "path": "/foo",
    "component": "layout.Base",
    "meta": {
      "title": "Foo1",
      "icon": "bar-chart"
    },
    "children": [
      {
        "name": "FooIndex",
        "path": "/foo/index",
        "component": "view.FooIndex",
        "meta": {
          "title": "FooIndex"
        }
      },
      {
        "name": "FooBarGoodsDetailProjectId",
        "path": "/foo/:bar/goods-detail/:projectId",
        "component": "view.FooBarGoodsDetailProjectId",
        "meta": {
          "title": "FooBarGoodsDetailProjectId"
        }
      },
      {
        "name": "FooBarGoodsDetailPage",
        "path": "/foo/:bar/goods-detail/page",
        "component": "view.FooBarGoodsDetailPage",
        "meta": {
          "title": "FooBarGoodsDetailPage"
        }
      }
    ]
  },
  {
    "name": "Multi",
    "path": "/multi",
    "component": "layout.Base",
    "meta": {
      "title": "Multi1",
      "icon": "bar-chart"
    },
    "children": [
      {
        "name": "MultiIndex",
        "path": "/multi/index",
        "component": "view.MultiIndex",
        "meta": {
          "title": "MultiIndex"
        }
      },
      {
        "name": "MultiPage",
        "path": "/multi/page",
        "meta": {
          "title": "Multi2",
          "icon": "bar-chart"
        },
        "children": [
          {
            "name": "MultiPageBar",
            "path": "/multi/page/bar",
            "component": "view.MultiPageBar",
            "meta": {
              "title": "MultiPageBar"
            }
          },
          {
            "name": "MultiPageFoo",
            "path": "/multi/page/foo",
            "component": "view.MultiPageFoo",
            "meta": {
              "title": "MultiPageFoo"
            }
          }
        ]
      }
    ]
  },
  {
    "name": "Single",
    "path": "/single",
    "component": "layout.Base",
    "meta": {
      "title": "Single1",
      "icon": "bar-chart"
    },
    "children": [
      {
        "name": "SingleIndex",
        "path": "/single/index",
        "component": "view.SingleIndex",
        "meta": {
          "title": "SingleIndex"
        }
      },
      {
        "name": "SinglePageBar",
        "path": "/single/page/bar",
        "component": "view.SinglePageBar",
        "meta": {
          "title": "SinglePageBar"
        }
      }
    ]
  }
]