ionic中定义路由的问题

最近做一个ionic的app项目，发现ionic的路由方式并不是很灵活。期间在路由跳转上遇到了很多的问题，这里直接上问题：

1、在这个app中，我要实现除了首页、分类页、购物车、个人中心这4个页面有tabs外，其它页面都不要tabs。如何实现？

这个很简单啊，在其它页面中隐藏掉tabs就行了。在路由中定义一个$rootscope.hideTabs变量，通过设置其值为true或false来控制是否隐藏tabs,但是这种方式很繁琐，要在没个view对应的contraller中都设置一遍值，而且使用全局变量并不是什么好事，所以这里我使用了另一种方法，就是除这4个页面继承tab路由外，其它的页面都不继承tab，下面是我的路由定义：

这样的话，其它页面中都不会有tabs了，你以为大功告成了？接下来你还是会遇到一系列让人头痛的问题，那么我们现在来看看：

首先，我们点击首页商品列表中的一个商品进入商品详情页，我靠，我明明在index.html中定义了<ion-nav-back-button></ion-nav-back-button>的，怎么没有返回键？这样我要怎么返回首页？哈哈，因为你的首页跟商品详情页不在同一个<ion-nav-view></ion-nav-view>中啊，根据ionic对路由的设置，不在同一<ion-nav-view></ion-nav-view>下的页面是不能共享历史记录的。在view中加个自定义组件如何?

<ion-nav-buttons side="left">  <a href="javascript:history.back(-1)" class="button button-icon icon ion-ios-arrow-thin-left" nav-direction="back"></a></ion-nav-buttons>

诶，这样好像行了，但是如果你还结合使用了<ion-nav-back-button>的话，还是会存在问题的，这里不想说了，有兴趣的朋友可以自己实践实践，而我要讲的是另一种做法：同样是定制私有组件，不过这种方法是通过传参数进行跳转的。

<ion-nav-buttons side="left">  <a class="button button-icon icon ion-ios-arrow-thin-left" ng-click="backNav()"></a></ion-nav-buttons>

在上一个页面跳转的时候传递一个参数：

$state.go('detail', {'id': id,'back':'tab.home'});

$scope.backNav = function() {  console.log($scope.historyBack);  $ionicViewSwitcher.nextDirection('back');  $state.go($stateParams.back);};这种方法很好的解决了在不同ion-nav-view中返回上一历史的问题，不管你是从首页跳到详情页还是从购物车跳到详情页，只要传的参数值不同，就能返回到相应的页面去。不过这种方法还是有缺点的，就是比较繁琐，每次都要传个参数。希望以后会有更好的解决方法。

转载于:https://www.cnblogs.com/gdhydx-ljm/p/5347852.html

ionic中定义路由的问题相关推荐

ionic中android的返回键
相对于苹果来说android还有一些功能按钮,这里面就包括了返回键.在苹果中只要你设置好每一个返回的按钮跳转的地方就可以高枕无忧了,但是android不行,因为它还有恶心的物理或者虚拟返回按钮.很多时 ...
LinuxC下获取UDP包中的路由目的IP地址和头标识目的地址
在接受到UDP包后,有时候我们需要根据所接收到得UDP包,获取它的路由目的IP地址和头标识目的地址. (一)主要的步骤: 在setsockopt中设置IP_PKTINFO,然后通过recvmsg来获取 ...
kohana中的路由规则
Kohana的路由规则是非常强大的.首先必须确认的是路由的匹配原则是有顺序,当一条路由规则匹配成功时,就停止匹配,也就是说在其后面定义的路由规则将不再被执行,因此最后的一条路由规则几乎可以匹配所有的路 ...
了解 WPF 中的路由事件和命令
目录路由事件概述 WPF 元素树事件路由路由事件和组合附加事件路由命令概述操作中的路由命令命令路由定义命令命令插入路由命令的局限避免命令出错超越路由命令路由处理程序示例要想 ...
【Android 组件化】路由组件 ( 构造路由表中的路由信息 )
文章目录一.封装路由信息二.注解处理器生成路由表信息 1.Activity 中使用 @Route 注解 2.注解处理器中判定注解是否检测出来 3.获取被 @Route 标注的注解节点 4.判断 ...
React中的路由react-router
Router 的基本使用! 我们需要npm 下载react-router: npm install react-router --save BrowserRouter或HashRouter Route ...
nodejs开发过程中express路由与中间件的理解 - pyj063 - 博客园
nodejs开发过程中express路由与中间件的理解 nodejs开发 express路由与中间件路由通常HTTP URL的格式是这样的: http://host[:port][path] h ...
Expo大作战(十二)--expo中的自定义样式Custom font，以及expo中的路由RouteNavigation
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网我猜去全部机翻+个人 ...
ASP.NET MVC教程五：ASP.NET MVC中的路由
一.概述在ASP.NET MVC架构中,控制器在3大核心构件中处于中心地位,通过控制器支配模型和视图,然而从浏览器发出的请求到控制器还需要路由的协助,路由将特定的请求和控制器的动作对应起来. 在AS ...

ionic中定义路由的问题

ionic中定义路由的问题相关推荐

最新文章

热门文章