HarmonyOS 鸿蒙Next router.getParams()为什么提示错误

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next router.getParams()为什么提示错误

在第一个页面上用router.pushUrl携带参数的方法，跳转到第二个界面，在第二个界面获取参数。但是提示错误。代码如下：

index.ets

import { router } from ‘@kit.ArkUI’;
@Entry
@Component
struct Index {
  @State message: string = ‘Hello World’;

  build() {
    Row() {
      Column() {
        Text(this.message)
          .id(‘HelloWorld’)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button(‘跳转’)
          .fontSize(40)
          .onClick(() => {
            router.pushUrl({
              url: ‘pages/Second’,
              params: {
                src: ‘Index页面传来的数据’,
              }},
              router.RouterMode.Standard,(err)=>
              {
                if(err) {

                }
              else{

              }
            })
          })
      }
    }
    .height(‘100%’)
    .width(‘100%’)
  }
}

Second.ets

import { router } from ‘@kit.ArkUI’;
@Entry
@Component
struct Second{
  @State
  message : string = ‘Hello World’
  @State
  src : string = router.getParams()?.[‘src’] //提示错误，错误为：Indexed access is not supported for fields (arkts-no-props-by-index)


  build(){
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50).fontWeight(FontWeight.Bold)

        Text(this.src).fontSize(30)

        Button(‘返回’).fontSize(40).onClick(()=>{
          router.back()
        })
      }
      .width(“100%”)
    }
    .height(‘100%’)
  }
}

Harmonyos Next教程
5 回复 
router.pushUrl({
  url: 'pages/WebViewPage',
  params: { name: 'nihao' }
})

let name = (router.getParams() as Record<string, string>)['name']

这样写就行
其实可以使用 
Object(router.getParams())['src']}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

示例

import {router } from '@kit.ArkUI'

@Entry
@Component
struct Page41 {
build() {
Column({ space: 5 }) {
Button(‘跳转测试’).onClick(()=>{
router.pushUrl({
url: ‘pages/Page42’,
params: {
src: ‘Index页面传来的数据’,
},
},
router.RouterMode.Standard,(err)=>
{
if(err) {


        }
        <span class="hljs-keyword">else</span>{

        }
      })
  })
}
.height(<span class="hljs-string">'100%'</span>)
.width(<span class="hljs-string">'100%'</span>)

}


}


<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
import { router } from ‘@kit.ArkUI’;


@Entry
@Component
struct Page42 {
aboutToAppear(): void {
console.info(src:${<span class="hljs-built_in">Object</span>(router.getParams())[<span class="hljs-string">'src'</span>]})
}
build() {
Column() {


}
.height(<span class="hljs-string">'100%'</span>)
.width(<span class="hljs-string">'100%'</span>)

}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

问题已经解决。ArkUI的router.getParams()的使用，和网上说的有差别。解决后的代码奉上

]index.ets界面代码：

import { router } from '[@kit](/user/kit).ArkUI';
class routerParams {
  src:string
  constructor(str:string) {
    this.src = str
  }
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .id('HelloWorld')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button('跳转')
          .fontSize(40)
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Second',
              params: new routerParams("这是第一页的值"),
              },
              router.RouterMode.Standard,(err)=>
              {
                if(err) {

                }
              else{

              }
            })
          })
      }
    }
    .height('100%')
    .width('100%')
  }
}

second.ets界面代码：

import { router } from '[@kit](/user/kit).ArkUI';

class routerParams {
  src:string
  constructor(str:string) {
    this.src = str
  }
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Second{
  [@State](/user/State)
  message : string = 'Hello World'
  [@State](/user/State)
  src : string =  (router.getParams() as routerParams).src
  build(){
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50).fontWeight(FontWeight.Bold)

        Text(this.src).fontSize(30)

        Button('返回').fontSize(40).onClick(()=>{
          router.back()
        })
      }
      .width("100%")
    }
    .height('100%')
  }
}

在HarmonyOS开发中，router.getParams() 方法通常不是路由API的标准部分，特别是在标准的路由库或框架中（如Vue Router在Web开发中）。HarmonyOS的路由管理可能依赖于其特有的API或框架实现。

如果你在使用类似Vue.js或其他MVVM框架的鸿蒙版本，并尝试调用 router.getParams() 但遇到错误，可能是因为：

  1. 方法名错误或不存在。
  2. 路由参数应通过其他方式获取，如组件的props或状态管理。

请检查你的路由库或框架的文档，确认正确的获取路由参数的方法。如果问题依旧没法解决请加我微信，我的微信是itying888。

回到顶部