鸿蒙-简单实现一个跳转页面及返回(路由)

跳转

步骤一:引入路由器

import  router from '@ohos.router'

步骤二:创建一个点击按钮

Button('跳转页面')
  .fontSize(14)
  .position({x:30,y:30})
//点击跳转页面
  .onClick( () =>{
//路由跳转
    router.pushUrl({
//跳转页面的路径
      url:'pages/MyText'

    }
//跳转不成功会有error
,router.RouterMode.Single,(err) => {
      if (err) {
        console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
    })
  }
  )

步骤三(注意):一定要在系统配置文件中声明要跳转的路径pages/MyText

否则会报错:The uri of router is not exis

02-28 21:15:57.977 21452-31234/? E 0FEFE/JsApp: Invoke pushUrl failed, code is 100002, message is Uri error. The uri of router is not exist.

返回到上个页面

步骤一:当前页面MyText也需要引入路由
import router from '@ohos.router';
步骤二:router.back();​​​​​​​

  • 12
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,可以非常方便的实现单页面应用程序的路由功能。 Vue Router 提供了以下两种方式实现页面路由跳转: 1. 声明式导航:通过 `<router-link>` 组件实现页面跳转,该组件会被渲染成一个 `<a>` 标签,点击该标签后会触发路由跳转。 2. 编程式导航:通过 `$router` 对象提供的方法实现页面跳转,例如 `$router.push()`、`$router.replace()`、`$router.go()` 等方法。 下面我们来看一个简单的示例,在 Vue Router 中如何实现页面路由跳转: ```html <!-- 在模板中使用 router-link 组件 --> <router-link to="/home">Home</router-link> <!-- 在组件中使用 $router 对象实现编程式导航 --> <button @click="$router.push('/about')">About</button> ``` 在上面的示例中,我们分别演示了如何使用 `<router-link>` 组件和 `$router` 对象实现页面路由跳转,其中 `to` 属性表示跳转的目标路由地址。 此外,Vue Router 还支持路由嵌套的功能,可以通过嵌套路由的方式实现页面的嵌套展示。下面我们来看一个嵌套路由的示例: ```javascript const router = new VueRouter({ routes: [ { path: '/home', component: Home, children: [ { path: 'news', component: News }, { path: 'videos', component: Videos } ] } ] }) ``` 在上面的示例中,我们定义了一个名为 `Home` 的路由组件,并在该组件中嵌套了两个子路由 `News` 和 `Videos`,这样就可以实现在 `Home` 组件中展示新闻和视频内容的功能。在实际开发中,我们可以根据实际需求来定义不同的路由组件和子路由实现灵活的页面嵌套效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值