Skip to content

编程式导航

除了使用 <kux-router-link> 创建标签来自定义导航外,我们还可以通过 router 的实例方法来自定义跳转到导航的页面。

路由实例支持 uniapp x API 页面跳转的所有方法,具体参考下面说明:

声明式编程式
<kux-router-link :to="...">router.push(...)
<kux-router-link :to="..." open-type="replace">router.replace(...)
<kux-router-link :to="..." open-type="reLaunch">router.reLaunch(...)
<kux-router-link :to="..." open-type="switchTab">router.switchTab(...)
-router.back(...)

下面以部分实例方法进行演示说明。

导航到不同的位置

注意

下面以及文档中所有的 router 都是指代的路由实例本身。在页面内部你可以使用 $router 访问路由,如:this.$router.push(...)。如果使用的是 组合式API,你可以通过 useRouter 来访问路由实例。

想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向路由栈添加一个新的记录。该方法基于 uni.navigateTo 实现。

当你点击 <kux-router-link> 时,其实组件内部也会这个方法。相当于调用 router.push(...):

声明式编程式
<kux-router-link :to="...">router.push(...)
该方法有一个参数,参数类型支持多种,具体类型说明如下:
类型名默认值说明
RouteRecordPath-路由地址,该类型会在重新编译的时候根据 pages.json 自动更新
RouteRecordNormalized-创建路由表时的路由配置信息

说明

上面参数类型支持下面所有的方法,如 router.replacerouter.reLaunch 以及 router.switchTab

ts
// 路径直传
router.push('/pages/user/list');

// 对象方式跳转,可以指定 `query` 参数,`data` 参数等其他内容
router.push({
    path: '/pages/user/info',
    query: {
        id: 1
    },
    data: {
        member_id: 30
    }
} as RouteRecordNormalized);

router.push 以及其他所有导航方法都会返回一个 Promise,这样我们可以等到导航完成后知道是导航成功还是失败了。你可以在 导航故障 中了解更多关于 导航故障 的情况。

替换当前位置

该方法类似于 router.push,不过它是关闭当前页面直接打开应用内的某个页面的形式。该方法基于 uni.redirectTo 实现。

声明式编程式
<kux-router-link :to="..." open-type="replace">router.replace(...)

参数类型 同上

ts
// 路径直传
router.replace('/pages/user/list');

// 对象方式跳转,可以指定 `query` 参数,`data` 参数等其他内容
router.replace({
    path: '/pages/user/info',
    query: {
        id: 1
    },
    data: {
        member_id: 30
    }
} as RouteRecordNormalized);

横跨历史

该方法采用一个整数作为参数,表示在历史堆栈中后退多少步。方法基于 uni.navigateBack 实现。

ts
// 返回1条记录,与 uni.navigateBack() 相同
router.back();

// 返回 3 条记录,与 uni.navigateBack({delta: 3}) 相同
router.back(3);

注意

上面所有示例代码用到了 RouteRecordNormalized 自定义类型,需要手动从路由库中手动导入该类型。

Released under the MIT License.