场景:uniapp页面是一个视频页,里面有多集视频,其中有部分是免费看的视频,所以无须登录,而需要购买的视频,点击购买时,如果已登录,则跳转到支付页,如果是未登录,则会弹出登录框。

需求:如果未登录,点购买,则出登录框后,直接跳转到支付页。

如图:

uniapp登录后跳转回上一个要访问的页面_缓存

uniapp登录后跳转回上一个要访问的页面_uniapp_02

uniapp登录后跳转回上一个要访问的页面_缓存_03


那么登录之后,原来的情况我们是回到这部视频页,然后再从列表选择某一集,再弹出购买按钮,点购买后再跳到支付页。

现在需要改进为,登录之后,就跳到支付页。

解决办法:使用缓存。

在视频页点击购买后,关键代码如下:

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中,登录后跳转回上一个要访问的页面的示例。