OpenHarmony JS——页面跳转

一、自定义底部导航栏组件创建

1. 定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
2. 设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。
3. 使用toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」
4. 导入 tabbarItem 数据，并设置对应 data ，同时设置点击事件 动态设置点击对应 icon 选中。
5. 设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」

二、自定义组件调用

自定义组件通过element引入到宿主页面，使用方法：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <text class="title">
        首页
    </text>
    <comp></comp>
</div>

三、  路由跳转

• 导入路由模块

import router from '@system.router';

• router.push(OBJECT)，跳转到应用内的指定页面。

jump(index){
//        this.tabbarItems.forEach((item,index) => {
//            item.img = tabbarItems[index].img;
//        });
//        this.tabbarItems[index].img = this.tabbarItems[index].simg;
        switch(index){
            case 0:
            // index页面，uri字段是页面路由，由配置文件中的pages列表指定。
                router.push({
                    uri: 'pages/home/index',
                    params:{
                        info:"这是路由传递的参数"
                    }
                });
            break;
            case 1:
            // index页面，uri字段是页面路由，由配置文件中的pages列表指定。
                router.push({
                    uri: 'pages/about/index',
                    params:{
                        info:"这是路由传递的参数"
                    }
                });
                break;
            case 2:
            // index页面，uri字段是页面路由，由配置文件中的pages列表指定。
                router.push({
                    uri: 'pages/news/index',
                    params:{
                        info:"这是路由传递的参数"
                    }
                });
                break;
            case 3:
            // index页面，uri字段是页面路由，由配置文件中的pages列表指定。
                router.push({
                    uri: 'pages/me/index',
                    params:{
                        info:"这是路由传递的参数"
                    }
                });
                break;
        }

    }