uniapp 几种导航跳转与传参

声明式跳转 利用组件进行跳转

利用navigator进行跳转

navigator详细文档:文档地址

跳转到普通页面



  

跳转到tabbar页面



  

编程式跳转 利用api跳转

通过navigateTo方法进行跳转到普通页面

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}

通过switchTab跳转到tabbar页面 (无返回键 关闭所有非tabelbar页面)

跳转到tabbar页面

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

 通过redirectTo方法进行跳转到普通页面  并且关闭当前页面

goMessagesss () {
			  uni.redirectTo({
			  	url: '/pages/login/login'
			  })
			}

通过onUnload测试当前组件确实卸载

onUnload () {
  console.log('组件卸载了')
}

导航跳转 传递参数 接收参数

在导航进行跳转到下一个页面的同时,可以给下一个页面传递相应的参数,接收参数的页面可以通过onLoad生命周期进行接收

声明式跳转传参


		  

 编程式跳转传参

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about?id=80',
  });
}

 接收参数的页面


                    
                    

你可能感兴趣的:(uni-app,前端)