最近在开发个人的一个小项目的时候遇到一个问题，原因是有一个列表，在点击某一项的时候要跳转到详情，这个详情是一个外部链接，并不是内部的
查了一下uni-app的文档，嗯，很好，果然很顺利的找到了web-view组件，然后很天真的直接把web-web放到列表中
<template>
<view class="history">
<view class="list">
<view
class="item"
v-for="(item, index) in list"
:key="index"
@click="itemClick(item)"
>
<view class="date">
{{item.title}}
</view>
</view>
</view>
<!--web-viwe的位置-->
<web-view :src="url" v-if="url.length"></web-view>
</view>
</template>
点击列表的某一项，打开了外部链接是这样子的
打开外部的链接
乍一看，好像没什么问题，但是！！嗯，我看完了，我怎么返回列表啊！！！（此时心态发生了一些变动，嗯，看看文档，哇！！文档也没说！！只有一些回调函数！！难道我要在回调函数里面给他加一个返回按钮吗？？？这也太蠢了吧！！
弄了快10分钟，突然！想到我好像可以定义一个内部页面，然后就只放一个web-view，然后在列表点击的时候，跳转到该内部页面，并且把需要打开的链接传递到该页面不就可以了吗！！！而且别的列表也要用到外部链接也可以调用该页面，复用性也有了！嗯，说干就干
<template>
<view class="history">
<view class="list">
<view
class="item"
v-for="(item, index) in list"
:key="index"
@click="itemClick(item)"
>
<view class="date">
{{item.title}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: []
}
},
methods: {
itemClick (data) {
// 跳转到内部窗口并且传递链接
uni.navigateTo({
url: `/pages/webview/webview?url=${data.link}`
})
}
},
created() {
//异步获取数据啦，没什么好说的
}
}
</script>
webview内部页面
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(e) {
// 获取传递过来的链接
this.url = e.url
}
}
</script>
最终效果
有返回按钮啦！
