InitRouterOptionsRule ​

用于创建一个路由程序实例的构造参数，如果你需要创建一个路由实例，你可以在应用实例中找到。如果你想查看完整的 InitRouterOptionsRule 签名你可以在 常用类型约束 中找到。

routes ​

用于在构建路由实例时第一时间创建的路由表。

• 必填

  ✅

• 类型

  ts

  interface InitRouterOptionsRule {
    routes: Readonly<RouteRecordBaseRule[]>;
  }

• 详细

  在创建路由表时，必须使用插件提供的编译函数 __dynamicImportComponent__ 来导入组件。该函数会自动根据不同的端适配导入方式，并符合插件所需路由表的组件规则。同时，您还可以查看 InitRouterOptionsRule 签名和 RouteRecordBaseRule 签名，以了解更多关于路由表的初始化选项和路由记录的基本规则。

• 示例

  js

  import {
    createRouter,
    __dynamicImportComponent__
  } from '@/uni-simple-router'
  
  const IndexCom = __dynamicImportComponent__(`@/pages/index.vue`,{
    pageType:`top`
  })  
  
  const router = createRouter({
    routes:[{
        path:`/`,
        component:IndexCom,
    }]
  })

• 参考 指南 - 路由组件

platform ​

用于在构建路由实例时告知当前运行的平台。

• 必填

  ✅

• 类型

  ts

  interface InitRouterOptionsRule {
    platform: Readonly<platformRule>;
  }

• 详细

  该配置项在 编译时 和 运行时 会提供给编译器，以便编译器可以处理对应平台的源码。如果您希望动态支持所有平台，可以使用 process.env.VUE_APP_PLATFORM 来实现。

• 示例

  js

  import {
    createRouter,
    type platformRule,
  } from '@/uni-simple-router'
  
  const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM as platformRule
  })

• 参考 指南 - 从显示 Hello Word 开始 及 签名 - platformRule

keepUniOriginNav ​

是否保留 uni-app 的原始跳转方法，保留的情况下 执行uni-app 的跳转方法，不会触发路由跳转。

• 必填

  ❌

• 类型

  ts

  interface InitRouterOptionsRule {
    keepUniOriginNav?: boolean;
  }

• 示例

  js

  import {
    createRouter,
  } from '@/uni-simple-router'
  
  const router = createRouter({
    keepUniOriginNav:true
  })

launchedFail ​

App 或者 小程序 端在启动时，启动失败的生命周期。

• 必填

  ❌

• 类型

  ts

  interface InitRouterOptionsRule {
    launchedFail?:(err:NavigationFailure)=>void
  }

• 示例

  js

  import {
    createRouter,
    type platformRule,
  } from '@/uni-simple-router'
  
  const router = createRouter({
    launchedFail:(err)=>{
      console.log(`启动失败，失败原因如下：`)
      console.log(err)
    }
  })

• 参考 签名 - NavigationFailure

routeNotFound ​

路由表未匹配到时触发该函数，可返回一个新的地址来捕捉常见的404页面或无权限认证。

• 必填

  ❌

• 类型

  ts

  interface InitRouterOptionsRule {
    routeNotFound?:(to:Record<string,any>)=>RouteLocationRaw;
  }

• 示例

  js

  import {
    createRouter,
  } from '@/uni-simple-router'
  
  const router = createRouter({
    routeNotFound:(to)=>{
      return {
        name:`404`,
      }
    }
  })

• 参考 进阶 - 捕捉路由404

hotRefresh ​

开发环境下 非H5端热编译导致嵌套视图路径丢失的问题。

• 必填

  ❌

• 类型

  ts

  interface InitRouterOptionsRule {
    hotRefresh?: {
        mode: `development` | `production`
        to: RoutePushLocationRaw,
        navType: NavTypeRule
    };
  }

• 示例

  js

  import {
    createRouter,
  } from '@/uni-simple-router'
  
  const router = createRouter({
    hotRefresh:{
    	mode:process.env.NODE_ENV,
    	to:`/?id=6666`,
    },
  })

• 参考 杂项 - 发与热更

app ​

编译到 App端 时的专属配置。

• 必填

  ❌

• 类型

  ts

  interface InitRouterOptionsRule {
    app?: {
        /**
         * app 端退出应用函数 如果默认不传递则走插件底层函数
         */
        runtimeQuit?: (title?: string) => void
        /**
         * app 启动完成后会触发该函数
         */
        launchedHook?: () => void
        /**
         * app 设置侧滑手势 仅ios支持
         */
        setSideSlipGesture?: (to: RouteRecordRow) => iosPopGestureRule
    }
  }

app.runtimeQuit ​

• 参考 特性 - 安卓退出应用

app.setSideSlipGesture ​

• 参考 特性 - 苹果手势侧滑返回

applet ​

编译到 小程序端 时的专属配置。

• 必填

  ❌

• 类型

  ts

  interface InitRouterOptionsRule {
    applet?: {
        /**
         * 小程序 启动完成后会触发该函数
         */
        launchedHook?: () => void
        /**
         * 是否自动隐藏原生导航栏小房子按钮
         */
        hideHomeButton?:boolean
    }
  }

• 详细

  • hideHomeButton 支持平台
    • 微信小程序
    • 支付宝小程序
    • 抖音小程序
    • QQ小程序

applet.launchedHook ​

import {
  createRouter,
} from '@/uni-simple-router'

const router = createRouter({
  applet:{
    launchedHook:()=>{
      console.log(`应用启动完成`)
    }
  }
})

applet.hideHomeButton ​

import {
  createRouter,
} from '@/uni-simple-router'

const router = createRouter({
  applet:{
    hideHomeButton:true
  }
})

h5 ​

编译到 H5端 时的专属配置。

• 必填

  ❌

• 类型

  ts

  interface InitRouterOptionsRule {
    h5?:{
        /**
         * 切换页面的动画配置
         */
        animation?:{
            /**
             * 需要监听的跳转类型
             */
            includeNavtype:NavTypeRule[]
            /***
             * 动画配置
             */
            animationNodeMap:H5AnimationNodeMapRule
            /**
             * 动画时长
             */
            animationTime:number
            /**
             * 默认动画
             */
            defaultAnimationType:keyof H5AnimationNodeMapRule | ((to:RouteRecordRow,from:RouteRecordRow)=>keyof H5AnimationNodeMapRule|null)
            /**
             * 动画窗口根节点
             */
            animationAppEl:HTMLElement | ((to:RouteRecordRow,from:RouteRecordRow)=>HTMLElement|null) | string
            /**
             * 动画创建之前的函数
             */
            beforeCreate?:(
                config:ProxyAnimationRule,
                to:RouteRecordRow,
                from:RouteRecordRow
            )=>void | ProxyAnimationRule
            /**
             * 动画完成之后
             */
            afterFinish?:(to:RouteRecordRow,from:RouteRecordRow) => void
        }
    }
  }

• 参考 进阶 - H5转场动画