uniapp跳轉到外部鏈接詳解

一、常規跳轉方式

1、使用a標籤進行跳轉：

    
<a href="https://www.baidu.com">跳轉到百度</a>
    

2、使用window.location.href進行跳轉:

    
<script>
window.location.href="https://www.baidu.com"
</script>
    

3、使用window.open進行跳轉:

    
<script>
window.open("https://www.baidu.com")
</script>
    

二、uniapp中跳轉方式

1、使用uni.navigateTo進行跳轉：

    
uni.navigateTo({
    url: 'pages/about/about'
})
    

2、使用uni.reLaunch進行跳轉:

    
uni.reLaunch({
    url: 'pages/about/about'
})
    

3、使用uni.switchTab進行跳轉:

    
uni.switchTab({
    url: 'pages/about/about'
})
    

4、使用uni.redirectTo進行跳轉:

    
uni.redirectTo({
    url: 'pages/about/about'
})
    

三、跳轉到外部鏈接

1、使用uni-app外鏈跳轉插件進行跳轉：

    
async goToBaidu() {
    await uni.$throttle(async () => {
        await this.$link.goto('https://www.baidu.com/')
    })
}
    

2、使用uni-app支付寶小程序跳轉插件進行跳轉:

    
import jump from '@cygg/uni-jump-alipay-miniapp'
jump.jumpToMiniProgram({
    appId: 'xxxxx',
    url: 'pages/about/about'
}, {
    needLogin: true
})
    

四、自定義外部鏈接跳轉

1、使用location.href自定義外部鏈接跳轉：

    
async goToUrl(url) {
    if(url.indexOf('http') !== -1) {
        location.href = url
    } else {
        uni.navigateTo({
            url
        })
    }
}
    

2、使用uni.openUrl自定義外部鏈接跳轉:

    
uni.openUrl({
    url: 'https://www.baidu.com'
})
    

五、注意事項

1、使用uni.navigateTo/uni.redirectTo/uni.switchTab跳轉時，url路徑必須為相對路徑或絕對路徑（服務器域名和小程序域名必須進行配置）；

2、使用uni.$link.goto跳轉時，需要在manifest.json中進行相關配置；

3、使用uni-app支付寶小程序跳轉插件時，需要在APP.vue中進行相關配置；

4、使用uni.openUrl自定義外部跳轉時，需要在manifest.json中進行相關配置；

5、盡量避免瀏覽器釣魚等惡意鏈接跳轉。