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

2021-12-18 09:30:45 阅读：149 来源： 互联网

我们有这样一个需求，就是初次进入页面我们不需要登录，但是如果进入到某个详情页，需要下单，或者填写收发货地址等，我们需要返回到登录页去登录，登录成功之后，再次返回对应的下单页面或者收发货地址页面
比如我们有这样四个页面，一个是首页，一个是首页详情页，一个订单页,一个是登录页(注意登录页是一个页面不是组件)
(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 {
        
      }
    },
    onl oad() {
      // 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 {
        
      }
    },
    onl oad() {
      // 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>

标签：uniapp,登录,index,url,token,uni,页面
来源： https://blog.csdn.net/weixin_42232156/article/details/122008534

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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