uniapp跳轉詳解

一、uniapp跳轉方式

uniapp的跳轉方式主要有兩種：頁面跳轉和應用跳轉。頁面跳轉是指在應用內不同頁面之間的跳轉，而應用跳轉是指在應用內或者應用外啟動其他應用。

二、uniapp跳轉錨點

在uniapp中，可以通過在頁面中添加錨點，實現在同一頁面內的跳轉。例如，在目標位置處添加一個錨點「target」，然後在跳轉的按鈕上添加屬性「href=’#target’」，即可實現頁面內跳轉到目標位置的功能。

<template>
  <div>
    <p id="target">目標位置</p>
    <button @click="goToTarget">跳轉至目標位置</button>
  </div>
</template>

<script>
  export default {
    methods: {
      goToTarget() {
        window.location.href = '#target'
      }
    }
  }
</script>

三、uniapp跳轉頁面

頁面跳轉是uniapp中一個非常常見的需求，如從登錄頁跳轉至主頁等。uniapp提供了兩種方式：uni.navigateTo和uni.redirectTo。uni.navigateTo將以新窗口打開新頁面，而uni.redirectTo則是在當前窗口打開新頁面，同時關閉當前頁面。uni.navigateBack可以實現返回上一個頁面的功能。

//頁面1
<template>
  <button @click="goToPage2">跳轉至頁面2</button>
</template>

<script>
  export default {
    methods: {
      goToPage2() {
        uni.navigateTo({
          url: '/pages/page2/page2'
        })
      }
    }
  }
</script>

//頁面2
<template>
  <div>
    <p>頁面2</p>
    <button @click="goBack">返回上一頁</button>
  </div>
</template>

<script>
  export default {
    methods: {
      goBack() {
        uni.navigateBack()
      }
    }
  }
</script>

四、uniapp跳轉10次

在uniapp中，跳轉同一個頁面超過10次後會在控制台輸出錯誤信息。可以通過uni.reLaunch方法，將路由棧清空，然後再跳轉。

<template>
  <button @click="jumpTenTimes">跳轉10次</button>
</template>

<script>
  export default {
    methods: {
      jumpTenTimes() {
        for (let i = 0; i 

五、uniapp跳轉內部頁面

uniapp中可以通過url的方式跳轉至不同頁面。例如，跳轉至tabs頁中的某一個子頁面的方式為：/pages/tabs/tab1/tab1。

<template>
  <button @click="goToTab1">跳轉至tab1頁面</button>
</template>

<script>
  export default {
    methods: {
      goToTab1() {
        uni.navigateTo({
          url: '/pages/tabs/tab1/tab1'
        })
      }
    }
  }
</script>

六、uniapp跳轉外部網站

跳轉至外部網站的方式與原生的方式一樣，也是通過window.open方法實現。

<template>
  <button @click="goToExternalWebsite">跳轉至外部網站</button>
</template>

<script>
  export default {
    methods: {
      goToExternalWebsite() {
        window.open('https://www.baidu.com/', '_blank')
      }
    }
  }
</script>

七、uniapp跳轉傳值

通過url的方式可以實現頁面之間的數據傳遞。例如，在跳轉至page2頁面的同時，傳遞一個名為「name」的參數，其值為「Tom」。

//頁面1
<template>
  <button @click="goToPage2">跳轉至頁面2</button>
</template>

<script>
  export default {
    methods: {
      goToPage2() {
        uni.navigateTo({
          url: `/pages/page2/page2?name=${encodeURIComponent('Tom')}`
        })
      }
    }
  }
</script>

//頁面2
<template>
  <p>{{name}}</p>
</template>

<script>
  export default {
    data() {
      return {
        name: ''
      }
    },
    onLoad(options) {
      this.name = decodeURIComponent(options.name)
    }
  }
</script>

八、uniapp跳轉小程序

uniapp中可以通過uni.navigateToMiniProgram實現跳轉至其他小程序的功能。需要注意的是，只有在微信小程序環境中才能調用該方法。

<template>
  <button @click="goToDemoMiniProgram">跳轉至小程序</button>
</template>

<script>
  export default {
    methods: {
      goToDemoMiniProgram() {
        uni.navigateToMiniProgram({
          appId: 'wx8abaf00ee8c3202e',
          path: 'pages/index/index',
          extraData: {
            foo: 'bar'
          },
          envVersion: 'release',
          success() {
            console.log('跳轉成功')
          }
        })
      }
    }
  }
</script>

九、uniapp跳轉傳參數

除了在url中傳遞參數外，還可以通過uni.navigateTo和uni.redirectTo的第二個參數options來進行傳值。

//頁面1
<template>
  <button @click="goToPage2">跳轉至頁面2</button>
</template>

<script>
  export default {
    methods: {
      goToPage2() {
        uni.navigateTo({
          url: '/pages/page2/page2',
          success() {
            uni.$emit('setName', 'Tom')
          }
        })
      }
    }
  }
</script>

//頁面2
<template>
  <p>{{name}}</p>
</template>

<script>
  export default {
    data() {
      return {
        name: ''
      }
    },
    mounted() {
      uni.$on('setName', (name) => {
        this.name = name
      })
    }
  }
</script>

十、uniapp跳轉頁面傳參數

在進行頁面跳轉時，可以通過uni.navigateTo和uni.redirectTo的第一個參數url來傳遞參數。在目標頁面中，可以通過onLoad方法獲取到參數。

//頁面1
<template>
  <button @click="goToPage2">跳轉至頁面2</button>
</template>

<script>
  export default {
    methods: {
      goToPage2() {
        uni.navigateTo({
          url: `/pages/page2/page2?name=${encodeURIComponent('Tom')}`
        })
      }
    }
  }
</script>

//頁面2
<template>
  <p>{{name}}</p>
</template>

<script>
  export default {
    data() {
      return {
        name: ''
      }
    },
    onLoad(options) {
      this.name = decodeURIComponent(options.name)
    }
  }
</script>