In an article: developer.huawei.com/consumer/cn…

This section content: add the training page and realize it and the main page of each other jump source warehouse address: gitee.com/zhaoquan/ha…

Create the training page

Knowledge:

Create page page jump: router.replace config.json in the Pages page management

Modify the code for the training page

Here the page frame is exactly the same as the first page, so just copy the code and make some changes

<! --xunlian.hml--> <divclass="container">
    <text class="title"> <! -- Hello {{title}}--> </text> <input type="button" class="btn" value="Return" onclick="clickAction"></input>
</div>
Copy the code

In the default code generated when xunlian. HML creates the page, change: Hello {{title}} to:

The training page xunlian. CSS has the same style as the main page index. CSS

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

export default {
    data: {
// title: 'World'
    },
    clickAction(){
        // console.log(" I was clicked ")
        router.replace({
            uri:'pages/index/index'}); }}Copy the code

The default code generated when the page is created in xunlian.js will be:

  • Hello {{title}} comment it out. This is not used on the training page.

  • Import router from ‘@system.router’.

  • Router-replace ({uri:’pages/index/index’,});

In DevEco Studio 2.0 beta, right-click on the Pages directory and choose New >JS page from the shortcut menu. The config.json pages array section is filled out automatically

The index.js file on the main page is modified accordingly:

Change index.js to:

  • Comment out Hello {{title}} in the js default code. This is not used in the training page.
  • Import router from system’s router: ‘import router from ‘@system.router’.
  • Router.replace ({uri:’pages/xunlian/xunlian’,});

Start simulator

Run -> debug ‘entry’

Next article: developer.huawei.com/consumer/cn…

The original link: developer.huawei.com/consumer/cn… Author: chatterzhao