比如添加一个全局跳转按钮
该方法仅支持H5,不支持小程序和App
创建组件
/components/returnback/returnback.vue
<template><view class="returnback" @tap="goTo()"><view>返回</view></view>
</template>
<script>export default {
name:'returnback',
data() {
return {
};
},
methods:{
goTo(){
window.location.href='https://www.baidu.com'
}
}
}
</script>
<style scoped lang="scss">
.returnback{
position: fixed;
left: 20rpx;
width: 80rpx;
height: 80rpx;
border-radius: 80rpx;
text-align: center;
line-height: 80rpx;
bottom: 20%;
background: #02BECC;
box-shadow:0 0 5rpx rgba($color: #000000, $alpha: 0.3);
color: #FFFFFF;
}
</style>
提示:页面跳转不支持uni.navigateTo reLaunch switchTab 等方法
main.js添加方法
// #ifdef H5
import returnback from '@/components/returnback/returnback.vue'
let rtbak = Vue.component('returnback',returnback)
// #endif
// 以下放在app.$mount();下面
// #ifdef H5
document.body.appendChild(new rtbak().$mount().$el)
// #endif
返回按钮会存在每个页面,点击即可跳转设定好的页面,如果需要动态配置跳转页面,可在组件里设置