当前位置:   article > 正文

鸿蒙征文 | 路由跳转router详细讲解_router.pushnamedroute

router.pushnamedroute

概述:

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块,通过不同的url地址,可以方便地进行页面路由,轻松地访问不同的页面。本文将从页面跳转、页面返回两个方面介绍Router模块提供的功能。

页面跳转

页面跳转是开发过程中的一个重要组成部分。在使用应用程序时,通常需要在不同的页面之间跳转,有时还需要将数据从一个页面传递到另一个页面。

图1 页面跳转

点击放大

Router模块提供了两种跳转模式,分别是router.pushNamedRoute()和router.replaceNamedRoute()。这两种模式决定了目标页是否会替换当前页。

  • router.pushNamedRoute():目标页不会替换当前页,而是压入页面栈。这样可以保留当前页的状态,并且可以通过返回键或者调用router.back()方法返回到当前页。

  • router.replaceNamedRoute():目标页会替换当前页,并销毁当前页。这样可以释放当前页的资源,并且无法返回到当前页。

说明

页面栈的最大容量为32个页面。如果超过这个限制,可以调用router.clear()方法清空历史页面栈,释放内存空间。

同时,Router模块提供了两种实例模式,分别是Standard和Single。这两种模式决定了目标url是否会对应多个实例。

  • Standard:标准实例模式,也是默认情况下的实例模式。每次调用该方法都会新建一个目标页,并压入栈顶。

  • Single:单实例模式。即如果目标页的url在页面栈中已经存在同url页面,则离栈顶最近的同url页面会被移动到栈顶,并重新加载;如果目标页的url在页面栈中不存在同url页面,则按照标准模式跳转。

在使用页面路由Router相关功能之前,需要在代码中先导入Router模块。

import { router } from '@kit.ArkUI';
  • 场景一:有一个主页(Home)和一个详情页(Detail),希望从主页点击一个商品,跳转到详情页。同时,需要保留主页在页面栈中,以便返回时恢复状态。这种场景下,可以使用pushUrl()方法,并且使用Standard实例模式(或者省略)。

    1. // 在Home页面中
    2. function onJumpClick(): void {
    3. router.pushNamedRoute({
    4.   name: 'pages/Detail' // 目标url
    5. }, router.RouterMode.Standard, (err) => {
    6.   if (err) {
    7.     console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
    8.     return;
    9.   }
    10.   console.info('Invoke pushUrl succeeded.');
    11. });
    12. }

    说明

    标准实例模式下,router.RouterMode.Standard参数可以省略。

  • 场景二:有一个登录页(Login)和一个个人中心页(Profile),希望从登录页成功登录后,跳转到个人中心页。同时,销毁登录页,在返回时直接退出应用。这种场景下,可以使用replaceUrl()方法,并且使用Standard实例模式(或者省略)。

    1. // 在Login页面中
    2. function onJumpClick(): void {
    3. router.replaceNamedRoute({
    4.   name: 'pages/Profile' // 目标url
    5. }, router.RouterMode.Standard, (err) => {
    6.   if (err) {
    7.     console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
    8.     return;
    9.   }
    10.   console.info('Invoke replaceUrl succeeded.');
    11. })
    12. }

    说明

    标准实例模式下,router.RouterMode.Standard参数可以省略。

  • 场景三:有一个设置页(Setting)和一个主题切换页(Theme),希望从设置页点击主题选项,跳转到主题切换页。同时,需要保证每次只有一个主题切换页存在于页面栈中,在返回时直接回到设置页。这种场景下,可以使用pushNamedRoute()方法,并且使用Single实例模式。

    1. // 在Setting页面中
    2. function onJumpClick(): void {
    3. router.pushNamedRoute({
    4.   name: 'pages/Theme' // 目标url
    5. }, router.RouterMode.Single, (err) => {
    6.   if (err) {
    7.     console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
    8.     return;
    9.   }
    10.   console.info('Invoke pushUrl succeeded.');
    11. });
    12. }

  • 场景四:有一个搜索结果列表页(SearchResult)和一个搜索结果详情页(SearchDetail),希望从搜索结果列表页点击某一项结果,跳转到搜索结果详情页。同时,如果该结果已经被查看过,则不需要再新建一个详情页,而是直接跳转到已经存在的详情页。这种场景下,可以使用replaceUrl()方法,并且使用Single实例模式。

    1. // 在SearchResult页面中
    2. function onJumpClick(): void {
    3. router.replaceNamedRoute({
    4.   name: 'pages/SearchDetail' // 目标url
    5. }, router.RouterMode.Single, (err) => {
    6.   if (err) {
    7.     console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
    8.     return;
    9.   }
    10.   console.info('Invoke replaceUrl succeeded.');})
    11. }

以上是不带参数传递的场景。

如果需要在跳转时传递一些数据给目标页,则可以在调用Router模块的方法时,添加一个params属性,并指定一个对象作为参数。例如:

  1. class DataModelInfo {
  2. age: number;
  3. }
  4. class DataModel {
  5. id: number;
  6. info: DataModelInfo;
  7. }
  8. function onJumpClick(): void {
  9. // 在Home页面中
  10. let paramsInfo: DataModel = {
  11.   id: 123,
  12.   info: {
  13.     age: 20
  14.   }
  15. };
  16. router.pushUrl({
  17.   url: 'pages/Detail', // 目标url
  18.   params: paramsInfo // 添加params属性,传递自定义参数
  19. }, (err) => {
  20.   if (err) {
  21.     console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
  22.     return;
  23.   }
  24.   console.info('Invoke pushUrl succeeded.');
  25. })
  26. }

在目标页中,可以通过调用Router模块的getParams()方法来获取传递过来的参数。例如:

const params = router.getParams(); // 获取传递过来的参数对象
const id = params['id']; // 获取id属性的值
const age = params['info'].age; // 获取age属性的值

页面返回

当用户在一个页面完成操作后,通常需要返回到上一个页面或者指定页面,这就需要用到页面返回功能。在返回的过程中,可能需要将数据传递给目标页,这就需要用到数据传递功能。

图2 页面返回

点击放大

在使用页面路由Router相关功能之前,需要在代码中先导入Router模块。

import { router } from '@kit.ArkUI';

可以使用以下几种方式进行页面返回:

  • 方式一:返回到上一个页面。

    router.back();

    这种方式会返回到上一个页面,即上一个页面在页面栈中的位置。但是,上一个页面必须存在于页面栈中才能够返回,否则该方法将无效。

  • 方式二:返回到指定页面。

    router.back({
      url: 'pages/Home'
    });

    这种方式可以返回到指定页面,需要指定目标页的路径。目标页必须存在于页面栈中才能够返回。

  • 方式三:返回到指定页面,并传递自定义参数信息。

    router.back({
      url: 'pages/Home',
      params: {
        info: '来自Home页'
      }
    });

    这种方式不仅可以返回到指定页面,还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。

在目标页中,在需要获取参数的位置调用router.getParams()方法即可,例如在onPageShow()生命周期回调中:

onPageShow() {
  const params = router.getParams(); // 获取传递过来的参数对象
  const info = params['info']; // 获取info属性的值
}

说明

当使用router.back()方法返回到指定页面时,原栈顶页面(包括)到指定页面(不包括)之间的所有页面栈都将从栈中弹出并销毁。

另外,如果使用router.back()方法返回到原来的页面,原页面不会被重复创建,因此使用@State声明的变量不会重复声明,也不会触发页面的aboutToAppear()生命周期回调。如果需要在原页面中使用返回页面传递的自定义参数,可以在需要的位置进行参数解析。例如,在onPageShow()生命周期回调中进行参数解析。

作者:前端甄子丹

团队:坚果派

团队介绍:坚果派由坚果创建,团队拥有12个华为HDE以及若于其他领域的三十余位万粉博主运营。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/766728
推荐阅读
  

闽ICP备14008679号