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中返回上一历史的问题,不管你是从首页跳到详情页还是从购物车跳到详情页,只要传的参数值不同,就能返回到相应的页面去。不过这种方法还是有缺点的,就是比较繁琐,每次都要传个参数。希望以后会有更好的解决方法。

				
时间: 2024-10-13 18:19:23

ionic中定义路由的问题的相关文章

vue-router在组件化编码中,路由的使用步骤

一.在组件化编码中,路由的使用方法 1. 在路由组件文件夹下定义路由组件 和定义普通组件步骤相同 2. 在router.js文件中定义路由匹配规则 首先引入第一步中定义好的组件 import Home from './views/Home.vue' // 第二种引入方法,给 path 绑定组件时导入 ,有什么区别待查正,涉及赖加载 component: () => import(/* webpackChunkName: "search" */ './views/SearchUse

在做ionic使用ui-router定义路由的时候遇到的奇葩问题

在定义路由的时候我这样子定义的时候是有问题的.购物车和个人是属于同一级 都是tab.然后第一次点击购物车的时候渲染的竟然是个人.而且还会选中个人tab.这问题不知道为毛会这样.先说一下个人是最后一个tab .然后如果其他tab定义的url和最后一个tab的url前面有一样的话就会出现奇葩问题.我感觉第一个tab和其他也可能会有这个问题.//购物车.state('tab.cart', { url: '/user-cart', cache: false, views: { 'tab-cart': {

Vue-Router路由Vue-CLI脚手架和模块化开发 之 在单文件组件项目中定义数据、方法和组件之间的相互引用

定义数据 根据上一篇博文配置项目的结构的基础上继续进行优化: 在app.vue中的导出模块/组件部分设置其属性: export default{//导出模块/组件 data(){ return{ name:'perfect', count:0 } }, 在一个template标签中进行调用: <template> <div> <h2> 欢迎来到perfect*的博客园!!!</h2> <h3>{{name}}</h3> </te

解决 ionic 中的 CORS(跨域)

译者注:本人翻译功力有限,所以文中难免有翻译不准确的地方,凑合看吧,牛逼的话你看英文版的去,完事儿欢迎回来指正交流(^_^) 如果你通过 ionic serve 或者 ionic run 命令使用或 live reload 或者访问过外部 API 结点,那么你肯定遇到过 CORS 问题,譬如下面这样: XMLHttpRequest cannot load http://api.ionic.com/endpoint. No 'Access-Control-Allow-Origin' header

Yaf零基础学习总结8-Yaf中的路由和路由协议

路由器主要负责解析一个请求并且决定什么module.controller.action被请求:它同时也定义了一种方法来实现用户自定义路由,这也使得它成为最重要的一个MVC组组件.为了方便自定义路由, Yaf摒弃了0.1版本中的自定义路由器方式, 而采用了更为灵活的路由器和路由协议分离的模式.也就是一个固定不变的路由器, 配合各种可自定义的路由协议, 来实现灵活多变的路由策略. 作为一个应用中的路由组件是很重要的,理所当然的路由组件是抽象的,这样允许作为开发者的我们很容易的设计出我们自定义的路由协

【Web API系列教程】2.1 — ASP.NET Web API中的路由机制

这篇文章描述了ASP.NET Web API如何将HTTP请求发送(路由)到控制器. 备注:如果你对ASP.NET MVC很熟悉,你会发现Web API路由和MVC路由非常相似.主要区别是Web API使用HTTP方法来选择动作(action),而不是URI路径.你也可以在Web API中使用MVC风格的路由.这篇文章不需要ASP.NET MVC的任何知识. 路由表 在ASP.NET Web API中,控制器是一个用于处理HTTP请求的类.控制器中的公共方法被称为动作方法或简单动作.当Web A

ASP.NET MVC 3中的路由

准备发布新随笔,才发现草稿里还有几年前这篇烂了尾的,先放上来,有空再补完整吧-- (* 整理自<Pro ASP.NET MVC 3 Framework>学习笔记. *) 路由,正如其名,是决定消息经由何处被传递到何处的过程.也正如网络设备路由器Router一样,ASP.NET MVC框架处理请求URL的方式,同样依赖于一张预定义的路由表.以该路由表为转发依据,请求URL最终被传递给特定Controller的特定Action进行处理.而在相反的方向上,MVC框架的渲染器同样要利用这张路由表,生成

AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)

一.定义路由 ng-view - AngularJS 支持通过在单页面上的多个视图的单页应用 - ng-view 标记只是简单地创建一个占位符 - 使用 ng-template - 创建使用script标签的HTML视图 - 使用 - 定义类型作为主模块中 ng-template 的脚本块 $routeProvider - 映射相应的HTML页面或ng-template - 附加一个控制器使用相同键的服务   - 注意: - 需要angular-route.js脚本文件的引用 二.使用路由 锚点

ASP.NET MVC 中的路由

普通的路由 在以前版本的ASP.NET MVC里,这些规则会被定义在RouteConfig.cs文件,也有Routing Assistant扩展可以实现基于特性的路由,不过是收费滴,另外还有一个扩展:http://attributerouting.net/ ,也很不错:理论上ASP.NET MVC 中要实现任意的规则URL 应该是没有问题的. 比如配置的酒店详情页路由 //HOTEL DETAIL routes.MapRoute(name: "HotelDetail", url: &q