十五、【鸿蒙 NEXT】Navigation与router与Tabs组件

前言：

从Navigation组件定义来看，该组件给我们提供了两个能力，一个是路由能力，能跳转到其他子页面。另一个是给我们提供了一个页面模板，比如顶部菜单选择，底部有工具栏，页面展示如下。路由导航方面，鸿蒙又提供了一个单独的组件router组件，也能跳转页面。另外鸿蒙还提供了一个Tabs组件，底部也有工具栏，那么如果作为首页，需要通过切换工具栏，来切换不同页面该如何选择呢。

                            

      Navigation组件                                                              Tabs组件

一、路由能力我们选择 Navigation还是router

按照官方推荐，最好使用 Navigation，主要有几个优点，一个是 Navigation组件能自动适应屏幕大小，当屏幕大时，页面会自动双页展示，左边展示首页，右边展示子页面。而安卓中还需要自己适配代码，比如说上面图中，我点击首页的"Page1"，会跳转到一个子页面，如果是宽屏场景，该子页面就会展示在右侧。另外一个优点就是 Navigation更加灵活的进行栈的操作，提供了一系列的栈的操作接口，比如增删改查页面，拦截路由等等，满足用户更多的场景需求。并且router后续也不会再继续演进，只会保留当前能力。

二、作为首页我们使用 Navigation还是Tabs

我们首页通常下方会有导航，从 Navigation和Tabs组件的定义来看，者两个组件都有类似的展示形式，那我们该如何选择呢。我们对比下两种页面切换的效果，首先我们点击 Navigation组件的工具栏切换页面，它其实是做了一个页面跳转，子页面会入路由栈，跳转后，底部工具栏就被子页面覆盖了。而Tabs组件它是在同一个页面做了内容切换，本质还是同一个页面，切换后底部工具栏在。一般我们都选择Tabs组件来实现首页的导航。

                                                             Navigation工具栏跳转  

 

                                                           Tabs组件导航