uni-app快速入门（七）--组件路由跳转和API路由跳转及参数传递

uni-app有两种页面路由跳转模式，即使用navigator组件跳转和调用API跳转，API调转不要理解为调用后台接口的API，而是指脚本函数中使用跳转函数。

一、组件路由跳转

1.1 打开新页面

      打开新页面使用组件的open-type="navigate",见下面的代码：      

      <navigator url="/pages/news/index" open-type="navigate" hover-class="navigator-hover">

            <button>navigate跳转到新闻页面</button>

       </navigator>

       如果不在navigator组建中添加open-type属性，则默认为open-type="navigate"

1.2 页面重定向

     <navigator url="/pages/news/index" open-type="redirect" hover-class="navigator-hover">

            <button>redirect跳转到新闻页面</button>

     </navigator>

           页面重定向使用了open-type="redirect"，注意使用页面重定向不会进入历史记录，不支持

     页面返回。

1.3 页面返回

       页面返回使用open-type="navigateBack":

       <navigator   open-type="navigateBack"  >

            <button type="default">返回</button>

       </navigator>

1.4 Tab切换

       Tab切换主要用于从当前页面跳转到TabBar中的页面，例如我我的页面跳转到购物车页面：

       <navigator url="/pages/cart/index" open-type="switchTab" hover-class="navigator-hover">

            <button>跳转到购物车</button>

        </navigator>

1.5 reLaunch

      open-type设置为reLaunch时，会进行重加载，页面全部出栈，只留下新页面（例如跳转到首页），跳转后的页面不支持页面返回：

     <navigator open-type="reLaunch" url="/pages/index/index"><button>reLaunch跳转到首页</button></navigator>

二、API路由跳转

2.1 打开新页面

     在button组件中增加一个click方法goPage：

<button @click="goPage('/pages/news/index')">跳转到新闻页面</button>，然后script脚本实现goPage方法，goPage中使用uni.navigateTo实现路由跳转：

       <script>

            export default{

                name:"index",

                methods:{

                goPage(url){

                    uni.navigateTo({url:url}) //url中可以带传输，类似html的传参

                }

                }

            }

       </script>

2.2 页面重定向

       使用uni.redirectTo()方法关闭当前页面，跳转到应用内的某个页面，如果跳转到tabBar页面只能使用switchTab跳转。

2.3 页面返回

       使用uni.navigateBack()方法关闭当前页面，返回上一页面或多级页面，并且可以决定需要返回几层：

       uni.navigateBack({delta:1})

        此方法类似vue中的this.$router.go(-1),其中delta参数表示返回的页面数，如果大于现有页面数则返回到首页。

2.4 Tab切换

       使用uni.switchTab()方法跳转到tabBar页面，并关闭所有其他非 tabBar页面。

2.5 reLaunch

      使用uni.reLaunch()可以关闭所有页面，接着跳转到应用内的某个页面。

三、参数传递

3.1 接收参数

      例如首页跳转到新闻页带参数：

      uni.navigateTo({

          url:'pages/news/index?id=1&title=新闻'

      })

     在pages/news/index.vue页面接收参数：

     onLoad(opts){

         console.log(opts.id)//取id参数

         console.log(opts.title)//取title参数

     }

       需要注意的是，url有长度限制，太长的字符串会传递失败，可以用encodeURIComponent()方法解决，例如url:"pages/news/index?id=1&title="+encodeURIComponent('新闻动态')

       接收参数的时候使用decodeURIComponent:

       console.log(decodeURLComponent(opts.title))

3.2 获取当前页栈

       使用navigateTo()跳转会将页面添加到页面栈中，使用getCurrentPage()获取所有页面栈，第一个页面索引为0，最后进栈的是当前页（索引最大的,索引为总页面栈数量-1）：

       onLoad(opts){

           //获取页面栈

           let pages = getCurrentPaes();

           //第一个页面

           let firstPage = pages[0];

           console.log(firstPage.route);//结果pages/index/index

           //获取当前页

          let currPage = pages[pages.length-1];

          console.log(currPage.route);//最后打开的页

       }

3.3 解决微信小程序10层跳转限制

        微信小程序为解决性能问题，使用navigateTo()方法跳转，其页面限制为10层，解决方案是10页面以内使用navigateTo,超过10页使用redirectTo,例如下面的代码：

       组件使用自定义pushPage方法:

       <div @click="pushPage('pages/news/index?id=1&title=XXX')">xxx新闻标题</div>

       页面脚本：

       onLoad(opts){

           let pages = getCurrentPages();

           //获取页面栈总页数

           this.pagesCount = pages.length;

      },

       methods:{

            pushPage(url){

                if(this.pageCount>10){

                    uni.redirectTo({url})

                }

                else{

                    uni.navigateTo({url:url})

                }

            }

       }

3.4 解决tabBar不能传参问题

      跳转到 tabBar页面是不能传参的，此时可以将参数传入本地缓存实现传参。例如组件中使用<div @click="goPage('pages/index/index','1')">北京店</div>，脚本中goPage：

goPage(url,id){

    uni.setStorageSync("branch_shop_id",id);//设置缓存名字branch_shop_id，并将传入的id存入缓存

    uni.switchTab({url})

}

然后在接收页面pages/index/index的脚本中接收参数：

onShow(){

    let branchShopId = uni.getStorageSync("branch_shop_id");

    console.log(branchShopId);

}

本节总结：

       本节介绍了uni-app的组件路由跳转、API路由跳转、uni-app接收参数及层级限制，以及tabBar使用本地缓存实现参数传递等。