HarmonyOS学习之路由实现界面跳转

在阿里的icon库中下载相应图标

搞定最下面的图标之后，进行路径的配置
首先导入路由模块：

import router from '@system.router';

导入后进行函数的编写，利用router.push(OBJECT)完成界面的跳转

具体代码

如下：
tabbar.hml

<div class="container">
    <toolbar class="tabbar">
        <toolbar-item for="{{tabbarItems}}" icon='{{$item.img}}' value='{{$item.name}}' onclick="jump($idx)" ></toolbar-item>
    </toolbar>
</div>

tabbar.css

.tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
}

tabbar.js

import tabbarItems from '../../common/datas/tabbarItems.js';
import router from '@system.router';
export default {
    data:{
        tabbarItems
    },
    props:{
      index:{
          type:Number,
          default(){
              return 0;
          }
      }
    },
    jump(index){
        switch(index){
            case 0:
            router.push({
                uri:"pages/index/index",
                params:{
                    info:"传递了一个参数"
                }
            });
            break;
            case 1:
                router.push({
                    uri:"pages/news/news",
                    params:{
                        info:"传递了一个参数"
                    }
                });
                break;
            case 2:
                router.push({
                    uri:"pages/about/about",
                    params:{
                        info:"传递了一个参数"
                    }
                });
                break;
            case 3:
                router.push({
                    uri:"pages/me/me",
                    params:{
                        info:"传递了一个参数"
                    }
                });
                break;


        }
    }
}

在其他界面引入导航栏即可，如：

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