> 接上一篇：[https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869](https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869)
本節內容： 新增訓練頁面並實現其與主頁面的互相跳轉
原始碼倉庫地址：[https://gitee.com/zhaoquan/harmonyoswatchdemo](https://gitee.com/zhaoquan/harmonyoswatchdemo)

### 建立訓練頁面

> **知識點：**
> 
> **建立頁面**
> **頁面跳轉：router.replace**
> **config.json 中 Pages 頁面的管理**

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201009155350580.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201009155405371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

### 修改訓練頁面的程式碼
  這裡頁面框架跟首頁一模一樣，所以就對應複製程式碼，然後稍微做修改

```java

<div class="container">
    <text class="title">

        訓練頁面
    </text>
    <input type="button" class="btn" value="返回" onclick="clickAction">
</div>
```

在 xunlian.hml 建立頁面時生成的預設程式碼中將： 
Hello {{title}}  改為： 訓練頁面
將點我改為返回： <input type="button" class="btn" value="返回" onclick="clickAction">

---
訓練頁面 xunlian.css 跟主頁面 index.css 樣式一樣，複製過來不用修改

---

```java
//xunlian.js
import router from '@system.router'

export default {
    data: {
//        title: 'World'
    },
    clickAction(){
        //        console.log("我被點選了")
        router.replace({
            uri:'pages/index/index',
        });
    }
}
```

在 xunlian.js 建立頁面時生成的預設程式碼中將：

- Hello {{title}}  註釋掉，訓練頁面不用這個 。

- 從 system 的 router 中匯入 router： import router from '@system.router'。

- 使用router.replace實現頁面跳轉：router.replace({uri:'pages/index/index',});

>uri 這裡填寫的 page/xxx/xxx，這個是在專案端 config.json控制的，DevEco Studio 2.0 beta，在 Pages 目錄右鍵 -> New ->JS Page 這樣的方式建立頁面，config.json 裡 pages 陣列部分會自動填寫

---
### 主頁面的 index.js 檔案對應修改：
> 主頁面的 index.js 修改為：
>- 在 js 預設程式碼中將： Hello {{title}}  註釋掉，訓練頁面不用這個 。
>- 從 system 的 router 中匯入 router： `import router from '@system.router'。
>- 使用router.replace實現頁面跳轉：router.replace({uri:'pages/xunlian/xunlian',});

### 啟動模擬器
之前編輯好像儲存就重新整理這次好像沒有，我的操作是，重新點 debug，操作入口：Run -> Debug 'entry'
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201009155418421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201009155424625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

---  
> 下一篇：[https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203357560569140833&fid=0101303901040230869](https://developer.huawei.com/consumer/cn/forum/topicview?tid=0203357560569140833&fid=0101303901040230869)

---
原文連結：[https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356576775850798&fid=0101303901040230869](https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356576775850798&fid=0101303901040230869)
作者：chatterzhao

上手做一個華為鴻蒙手錶應用 3 - 兩頁面互相跳轉

相關文章