Skip to content

路由字段

页面组件中,我们创建了一个页面组件counter,同时创建了一个路由记录。这里我们进一步讲述路由记录的字段配置

路由字段清单

名称说明
path路由路径
name路由名称
component页面组件
alias路由别名
meta路由元数据
  • meta
名称说明
absolute是否为绝对路径
layout布局组件
requiresAuth是否需要认证

path

path是路由路径,系统会自动添加模块前缀,生成绝对路径。比如,页面组件counter的路由记录如下:

typescript
export const routes: IModuleRoute[] = [
  //
  { path: 'counter', component: Counter },
];
  • 由于该页面组件属于模块demo-basic,其绝对路径就是: /demo/basic/counter

name

一般而言,需要为动态路由提供name标识。动态路由就是可以在path上提供 params参数,比如:

typescript
export const routes: IModuleRoute[] = [
  //
  { name: 'user', path: 'user/:id', component: User },
];
  • 同样,系统也会为name添加模块前缀,生成绝对名称,比如这里就是demo-basic:user

component

component就是页面组件,支持同步组件异步组件。一般而言,只需提供同步组件即可。因为在 Zova 中,一个模块就是一个天然的拆包边界,在 build 构建时,自动打包成一个独立的异步 Chunk

alias

可以为路由指定别名。但是不能在模块的路由记录中指定路由别名,而是必须在全局 Config 中指定

meta.absolute

absolute指定当前 path 是否为绝对路径。如果是绝对路径就不会添加模块前缀。比如,在模块home-base中定义了 1 个绝对路由:

typescript
export const routes: IModuleRoute[] = [
  {
    path: '/:catchAll(.*)*',
    component: ErrorNotFound,
    meta: {
      absolute: true,
      layout: 'empty',
    },
  },
];
名称说明
path: '/:catchAll(.*)*'捕获所有未匹配路径,显示404页面

meta.layout

layout可以为该路由指定布局组件,如果不设置layout就会使用默认的布局组件

meta.requiresAuth

requiresAuth标识该路由是否需要认证,可以在导航守卫中添加相关的逻辑

基于 MIT 许可发布