DevEco Studio搭建第一个demo （router路由跳转的使用）

一、路由的简介

如果你之前有过android的开发经验，那么一定对路由这个词不会感觉到陌生，也就是Intent，在android里面Intent分为两种：

• 显式 Intent：通过指定目标 Activity 的类来启动新的界面
• 隐式 Intent：通过 Intent 的动作和数据来启动活动，而不是直接指定目标 Activity

这里就不过多介绍啦，有兴趣的小伙伴可以去百度百度；

页面路由指在应用程序中实现不同页面之间的跳转和数据传递，Router适用于模块间与模块内页面切换，通过每个页面的url实现模块间解耦，这里还有个路由模块叫做Navigation ，如果你有平板/折叠屏适配需求，建议你使用 Navigation，如果你的应用只在手机上运行，那么使用 Navigation 和 router 几乎没有差别，不过这里我们先简单的介绍下Router，后续再对Navigation进行深入探究；

Router模块提供了两种跳转模式，分别是router.poshUrl()和router.replaceUrl()，这两种用法决定了用户能不能使用返回键回退到上一个界面

• router.pushUrl(url)：将新的 URL 推入历史记录栈，用户可以通过“后退”操作返回到之前的页面。
• router.replaceUrl(url)：替换当前的 URL，不将新的 URL 添加到历史记录栈中，用户不能通过“后退（router.back()）”操作返回到之前的页面。
  下面写个简单的pushUrl Demo记录一下~

二、Router的实现

先建立一个简单的工程，里面有个默认诶都Index.ets，实现：

//引入相关库文件
import { BusinessError } from '@kit.BasicServicesKit';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        //定义一个按钮
        Button() {
          Text('Next')
            .fontSize(30)
            //字体格式正常
            .fontWeight(FontWeight.Normal)
        }
        .type(ButtonType.Capsule)
        //距离上方控件70间距
        .margin({ top: 70 })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定onClick事件，点击时跳转到第二页
        .onClick(() => {
          //点击跳转按钮
          console.info(`Succeeded in clicking the 'Next' button.`)
          // 跳转到第二页
          router.pushUrl({ url: 'pages/Second' }).then(() => {
            console.info('Succeeded in jumping to the second page.')
          }).catch((err: BusinessError) => {
            //异常监听
            console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
          })
        })
      }
      .width('100%')
    }
    .height('100%')

  }
}

这里我是建立了第二个界面叫Second.ets，你可以在pages文件目录下右键 New > ArkTS File”，命名为“Second”，但是这样创建一个ets的话需要在“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”，不然跳转的时候会报错Uri error. The uri of router is not exist.
或者你可以直接这样

这样子的话系统会自己帮你在main_pages.json文件中配置好第二个页面的路由“pages/xxx”了

Second.ets

// Second.ets
import { router } from '@kit.ArkUI'
import { BusinessError } from '@kit.BasicServicesKit'


@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            //格式
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        //背景颜色
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }.onClick(() => {
        //点击事件
        router.pushUrl({url: 'pages/Index'}).then(()=>{
          console.info('成功回跳第一个界面')
          try {
            //跳转事件
            //router.pushUrl({url: 'pages/Index'}).then......
            router.back()
          }catch (err){
           //异常监听
            let code = (err as BusinessError).code
            console.error(`Code is ${code}, message is ${err.message}`)
          }
        })
      })
      .width('100%')
    }
    .height('100%')
  }
}

编写好无报错之后直接运行到虚拟机