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>
- 搞定 , 日常记录!