场景:uniapp页面是一个视频页,里面有多集视频,其中有部分是免费看的视频,所以无须登录,而需要购买的视频,点击购买时,如果已登录,则跳转到支付页,如果是未登录,则会弹出登录框。
需求:如果未登录,点购买,则出登录框后,直接跳转到支付页。
如图:
那么登录之后,原来的情况我们是回到这部视频页,然后再从列表选择某一集,再弹出购买按钮,点购买后再跳到支付页。
现在需要改进为,登录之后,就跳到支付页。
解决办法:使用缓存。
在视频页点击购买后,关键代码如下:
console.log('- detail.nvue.vue -')
// prevurl 保存的值是:已经登录,则应跳转到哪一页。(根据自己的项目,如下示例)
const prevurl = `/pages/client/tuan/buy?id=${this.id}&mid=${mid}`;
// 缓存
uni.setStorage({
key: 'prevurl',
data: prevurl
});
console.log(prevurl)
console.log('- detail.nvue end -')
在登录页,登录成功后,关键代码如下:
console.log('- login.vue -')
// 获取当前页面栈实例
const pages = getCurrentPages();
// 获取当前页面栈的最后一个页面实例
const lastPage = pages[pages.length - 2];
// 提取部分
const prevurl = uni.getStorageSync('prevurl')
if (prevurl) {
uni.navigateTo({
url: prevurl
})
} else if(lastPage && lastPage.route === 'pages/login/reg'){
// 如果上一个页面是注册页,跳转到个人中心页
uni.switchTab({
url: '/pages/client/member/index'
});
}else{
// 否则,返回上一页
uni.navigateBack();
}
考虑到还有prevurl没有定义的情况,那就要跳转到上一页,但是注册后接着就登录,上一次是注册,所以还应排除此情况。
以上就是在uniapp中,登录后跳转回上一个要访问的页面的示例。