flutter中的路由跳轉

在前面的基本路由和命名路由中，都演示瞭如何進行路由跳轉，而且在路由跳轉之後，能夠借用系統自帶的按鈕就行返回上一級，固然了，也能夠自定義按鈕返回上一級。

返回上一級

在前面的例子中，當從Home.dart頁面跳轉到Search.dart頁面後，除了系統自帶的返回按鈕，咱們還自定義了一個按鈕，而後使用Navigator.of(context).pop()開返回上一級頁面。

       

路由替換

在實際項目中，僅僅上面的路由跳轉和返回上一級是不能知足需求的，例如在一個項目中，有一個註冊的須要，用戶在用戶中心點擊註冊按鈕後，跳轉到註冊頁面，可是咱們知道，註冊是須要分幾個步驟完成的：

假設註冊須要分上面的三個步驟，那麼當用戶在第二個步驟或者第三個步驟的時候，忽然不想註冊，因而點擊左上角的返回，是但願返回到用戶中心，而不是上一個註冊步驟，此時，僅僅依靠前面的路由跳轉是不能實現的，而是要藉助flutter的路由替換功能。

    

 

首先是在用戶中心頁面，點擊註冊按鈕，跳轉到registerFirst 的頁面。

而後在registerFirst 的頁面，輸入手機號之後，點擊下一步，跳轉到registerSecond的頁面。

這個時候在registerSecond的頁面，點右上角的返回，退出註冊時，就會返回到registerFirst 的頁面，若是咱們此時想要返回到用戶中心頁面的話，就須要在registerFirst 的頁面，使用路由替換來進行頁面跳轉，由於registerFirst 頁面的上一級就是用戶中心，當使用registerSecond頁面替換registerFirst 頁面的時候，registerSecond頁面的上一級就是用戶中心頁面了。

返回根路由

好比咱們從用戶中心跳轉到 registerFirst 頁面，而後從 registerFirst 頁面跳轉到 registerSecond頁面，而後從 registerSecond 跳轉到了 registerThird 頁面。這個時候咱們想的是 registerThird註冊成功後返回到用戶中心。 繼續採用上面的邏輯的話，就是在 registerSecond 跳轉到了 registerThird 頁面時，繼續使用路由替換，這樣，當在registerThird註冊成功後，使用返回上一級的方式，就能夠直接返回到用戶中心了。

可是，若是不採用路由替換的話，還有沒有辦法，直接一步返回到根目錄呢，（是返回，而不是路由跳轉），在其餘的框架裏面可能沒有辦法，可是在flutter中，有一個直接返回根路由的方法，只須要咱們在registerThird頁面，返回前先清空前面的路由，而後一步返回就能夠了。

 可是，此時還有一個新的問題，咱們是從用戶中心開始註冊的，當註冊完成後，是但願能直接回到註冊中心，可是在上面的操做中，直接返回到了tab的第一頁面，所以，還須要繼續修改Tabs.dart頁面：

而後在registerThird 頁面返回根目錄的時候，寫入須要返回tab的索引就能夠了：

 代碼下載：點這裏（w033）