uniapp登录成功之后返回对应的页面

我们有这样一个需求，就是初次进入页面我们不需要登录，但是如果进入到某个详情页，需要下单，或者填写收发货地址等，我们需要返回到登录页去登录，登录成功之后，再次返回对应的下单页面或者收发货地址页面

比如我们有这样四个页面，一个是首页，一个是首页详情页，一个订单页,一个是登录页(注意登录页是一个页面不是组件)

(1): 使用getCurrentPages获取，getCurrentPages函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

1： index.vue

 <template>
    <view class="container">
        <view >首页</view>
                <view @click="toDetail">列表页</view>
    </view>
</template>
methods: {
      toDetail() {
        uni.navigateTo({
          url: '/pages/index-detail/index-detail'
        })
      }
}

2：index-detail详情页

<template>
  <view>
    <view>详情页</view>
    <view @click="toPay" v-if="!token">支付</view>
  </view>
</template>

  onShow() {
      if(!this.token) {
        this.token = uni.getStorageSync("token")
      }
    },
  methods: {
      toPay() {
        console.log("token",this.token)
        if(this.token) {
          return console.log("可以支付")
          uni.navigateTo({
              url: '/pages/order/order'
          })
        }
        uni.navigateTo({ // 去到登录页面
          url:'/pages/login/login'
        })
      }
    }

3: login.vue 登录页

<template>
  <view>
    <view @click="loginHandler">登录页</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    onLoad() {
      // this.getPageNum()
    },
    methods: {
      getPageNum() {
        var pages = getCurrentPages() //获取加载的页面
        var currentPage = pages[pages.length -2];  // index-detail页面
        var url = currentPage.route //当前页面url
        uni.navigateBack({ url})
      },
      loginHandler() {
        let token = "jasj qdq dqhad";
        uni.setStorageSync("token",token)
        setTimeout(()=>{
          uni.showToast({
            icon:none,
            title:"登录成功"
          })
        },2000)
        this.getPageNum()
      }
    }
  }
</script>

(2): 封装一个公共的函数

1: main.js中

 const toBack = (url) => {
  let token = uni.getStorageSync("token");
  if(!token) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    return uni.navigateTo({
      url:"/pages/login/login"
    })
  }
  uni.navigateTo({url})
}
Vue.prototype.$toBack = toBack;

2：index.vue

 <template>
    <view class="container">
        <view >首页</view>
    <view @click="toDetail">列表页</view>
    </view>
</template>
methods: {
      toDetail() {
        uni.navigateTo({
          url: '/pages/index-detail/index-detail'
        })
      }
        }

3: index-detail.vue

 <template>
  <view>
    <view>详情页</view>
    <view @click="toPay">支付</view>
  </view>
</template>
  onShow() {
      if(!this.token) {
        this.token = uni.getStorageSync("token")
      }
    },
    methods: {
      toPay() {
        console.log("token",this.token)
        this.$toBack("/pages/order/order")
      }
    }

4: login.vue

 <template>
  <view>
    <view @click="loginHandler">登录页</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    onLoad() {
      // this.getPageNum()
    },
    methods: {
      loginHandler() {
        let token = "jasj qdq dqhad";
        uni.setStorageSync("token",token)
        setTimeout(()=>{
          uni.showToast({
            icon:none,
            title:"登录成功"
          })
        },2000)
        uni.navigateBack({delta: 1})
      }
    }
  }
</script>

最后编辑于：2021.12.16 14:44:22