uniapp 小程序嵌套 webview 返回需要点击两次

news2024/9/20 20:38:29

uniapp 小程序嵌套 webview 返回需要点击两次

先上图
小程序也监听不到返回事件
在网上找了一圈都没有理想的答案，猜测是因为嵌入的页面中有问题
果然

小程序中嵌入的代码

	<view>
		<web-view :src="urlSrc" ></web-view>
	</view>


	export default {
		data() {
			return {
			   urlSrc: "",
			}
	    },
	    onLoad(options) {
	        // 这里是要嵌入的页面路径
			this.urlSrc = getApp().globalData.webViewUrl + "/#/viewsEdit?key=" + options.id+"&token="+options.token
		},
   }

嵌入项目 app.vue

因为我需要在该项目中先登录，再跳转到 /viewsEdit 页面所以需要再app.vue中做默认登陆操作，然后再跳转到 /viewsEdit

<template>
  <div id="app">
    <RouterView />
  </div>
</template>

<script>
export default {
  created() {
    // 有发送就有接收，与postMessage配套使用的就是message事件
    let that = this
    window.onload = function () {
      let datas = that.getUrlParams(window.location.href)
       localStorage.setItem('token', datas.token)
        // 登录成功后路由跳回
        // 重点
        // 重点
        // 重点
        // 此处一定要使用  replace  替换掉 路由栈中的记录
        // 不然 路由栈中会存在  ['/','/viewsEdit'] 两个记录  所以需要点两次才能退出
        // 使用 replace 后 路由栈中就剩了 ['/viewsEdit'] 
        
        // this.$router.push({
        //  path: '/viewsEdit',
        //  query: {
        //   key: datas.key,
        // }
        // })
        this.$router.replace({
          path: '/viewsEdit',
          query: {
            key: datas.key,
          }
        })
    }
  },
  methods: {
    getUrlParams(url) {
      const params = {}
      const reg = /([^?&=]+)=([^&]*)/g
      url.replace(reg, (match, key, value) => {
        params[decodeURIComponent(key)] = decodeURIComponent(value)
      })
      return params
    }
  }

}
</script>