uni-app的路由跳转

首先uni-app提供的路由跳转分为两种,一种是声明式跳转,另一种是编程式的跳转,而这和原来的vue-router的实现是一样的。

声明式跳转(声明式导航):利用我们uni-app官方提供的组件进行跳转。
编程式跳转:利用API进行跳转。简单点理解,就是利用注册事件函数的方法去使用官方提供的跳转功能。


声明式跳转的四种案例:
(1)如果是别的(我这里是用button组件测试)组件包含navigator组件,页面不会实现跳转,控制台也不会报错。

        

(2)即便是标签包裹navigator组件,也是不会实现跳转的,但允许存在一个根标签,就是view。

        

(3)如果是navigator组件包含另一个组件,这样的方式是可以实现页面跳转的。


            


(4)navigator组件不允许跳转已经在pages.json里面的tabBar配置过的页面,换句话说,就是不能跳tabBar页面。


            

但如果真的有这样的需求,就是想要跳转到tabBar界面,其实也是可以的,官方文当提供了一个open-type属性。这个属性里面有一个值:open-type="switchTab",它就是用于跳转tabBar页面的。

        
            
        

如果是设置成open-type="redirect"

        
            
        

即页面没有返回功能。



如果设置了open-type="redirect"属性,即关闭当前页面,然后再去跳转到另一个页面上,上一次的页面已经被销毁,所以回不去了。


此外,如果我们不确定上一次的页面是否真的被销毁,是否真的回不去了呢,我们还可以用一个生命周期去监听当前页面的销毁(页面卸载)。


onUnload生命周期用于监听页面销毁。

onUnload:function(){
            console.log('页面已经被销毁了')
        }

这就是onUnload的跟踪效果。

uni-app官网相关信息:https://uniapp.dcloud.io/component/navigator?id=navigator


编程式导航

只可跳转至普通页面用:uni.navigateTo
只可跳转至tabBar页面用:uni.switchTab
跳转至目的页面,并关闭当前页面,没有返回:uni.redirectTo
万金油跳转,既可以用于跳转普通页面,又可以跳转tabBar页面:uni.reLaunch


用法:


methods: {
            navgateTo:function(){
                uni.navigateTo({
                    url:"/pages/NormalPage/searchCity"
                })
            }
        }

页面传参、路由传参

不管是声明式导航,还是编程式导航,都可以进行页面传参的做法

当前页面想要携带参数传递过去给目的页面使用,要以?为起始,&符做拼接多个参数

目的页面使用onLoad生命周期进行参数接受。
例子:

uni.navigateTo({
                    url:"/pages/NormalPage/searchCity?name=qfb&age=21"
                })

我们先来看下编程是导航写法。
具体案例:
当前为profile.vue页面,我们想要携带name=qfb&age=21这个参数,传递过去给/pages/NormalPage/searchCity页面。





而如果我们像要拿到从profile.vue页面传递过来的两个参数,就需要在/pages/NormalPage/searchCity页面里使用onLoad生命周期去接收这个两个参数。


searchCity.vue页面

onLoad:function(option){
            console.log(option)
        },

当我们点击按钮,页面跳转过来时,我们就拿到profile.vue页面传递过来的2个参数。



声明式导航传参数也是如此,主要作用于url属性上,在url路径后面拼接想要携带的参数,?开始,&做拼接,另一端的页面用onLoad生命周期接受传递过来的参数。


传参的页面。


        


接收参数的页面。

onLoad:function(option){
            console.log(option)
        },

你可能感兴趣的:(uni-app的路由跳转)