ionic 中的路由玩法

2021-07-25 05:24:12 字數 1563 閱讀 1814

開發ionic的專案,路由其實還是蠻重要的乙個東西。有了這個東西,我們可以很輕鬆的實現頁面的切換和跳轉。這裡我就介紹一些ionic中的一些路由的簡單玩法。

1.路由的準備

首先我們要想路由能很好的工作,那我們就需要在config中配置好相關的東西。在config中需要用到$stateprovider 和$urlrouterprovider兩個模組,我們要將他們依賴進來。

然後我們就先用$stateprovider配置好所有的state

例如 .state('login', )

接著設定開啟應用後預設顯示的頁面 $urlrouterprovider.otherwise('/login');

2.路由的跳轉

1)路由的跳轉有很多種,比如ionic下面的tabs切換就用的是href ,下面圖就是ionic案例中的tabs的路由跳轉,這裡href後面的引數是追加到路徑中的最後的那一部分

2)第二個是使用ui-sref指令,指令後面的引數是配置的state 中的名字 如我們上面給了乙個登入的state配置,要跳轉到登入只需要在標籤上新增 ui-sref="login"即可

3)接著我們介紹使用js跳轉路由。使用js跳轉路由需要在控制器或者其他使用跳轉的地方注入$state。首先為大家介紹的是go方法。它的使用方法很簡單

$state.go(to [, toparams] [, options]) (詳細引數和使用方法可以去這檢視)

4)$state物件中除了go方法可以實現跳轉,還有乙個方法也可以實現跳轉,那就是 transitionto方法

$state.transitionto(to, toparams [, options]) (詳細引數和使用方法可以去這裡檢視)

$state中的reload方法也是同過這個方法實現的

$state.transitionto($state.current, $stateparams, );
5)如果不想用$state 沒關係,我再介紹其他的物件,這個物件便是$location,當然要使用它也是需要注入。比如我現在想跳轉到登入頁面時我只需要$location.path('/lgin').replace() 

3.監控路由的變化

如果想在路由跳轉前進行部分操作就使用 

$scope.$on('$statechangestart',function(event,tostate,toparams,fromstate,fromparams))

這裡的tostate資訊便是你要切換的state的資訊,比如我要去login頁面,那麼這個tosate物件便是

這個的用處還是很大的,比如我現在是登入頁面的時候,如果我開始登入了,然後退出的時候我現在返回的時候就不能回到之前登陸過的頁面。這時候就可以呼叫

event.preventdefault() 來阻止頁面跳轉

當然還有乙個也可以在路由切換之後執行一些操作 那就使用$statechangesuccess

雲開發的雲函式路由高階玩法介紹

李成熙,騰訊雲高階工程師。2014年度畢業加入騰訊alloyteam,先後負責過qq群 花樣直播 騰訊文件等專案。2018年加入騰訊云云開發團隊。專注於效能優化 工程化和小程式服務。微博 知乎 github 概念回顧 在掘金開發者大會上,在推薦實踐那裡,我有提到一種雲函式的用法,我們可以將相同的一些...

ionic中android的返回鍵

ionic中android的返回鍵 在ionic框架中已經註冊了幾個返回事件,分別是 view sidemenu modal actionsheet popup loading 他們的優先順序分別是 view 100 sidemenu 150 modal 200 actionsheet 300 po...

ionic中的中文tts整合

因為業務需要,需要用到tts播報中文語音,但是目前外掛程式庫能搜到的tts外掛程式幾乎全是英文的 因為谷歌安卓系統本身的問題 所以只能自己借助中文tts語音包編寫外掛程式.目前外掛程式已經更新到外掛程式庫,本人在ionic4下採用angular開發方式已經完成了驗證與使用.需要的可以直接使用我寫好的...