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 < 10; i++) {
          uni.navigateTo({
            url: '/pages/page2/page2'
          })
        }
        uni.reLaunch({
          url: '/pages/page2/page2'
        })
      }
    }
  }
</script>

五、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>