小程序中的頁面跳轉

在之前網頁的學習中，我們往往采用超鏈接，或者定義方法、函數等方式來實現頁面的跳轉，但是微信小程序中沒有超鏈接，那我們該如何實現呢？微信小程序的頁面跳轉包括兩個，一個是tabBar頁面的跳轉，一個是非tabBar頁面的跳轉

1.跳轉到tabBar頁面

使用的代碼

uni.switchTab({})

• html代碼

  <template><view><view><button>欣賞小姐姐</button></view></view>
  </template>
  

• js代碼

<script>export default {data() {return {}},methods: {// 定義跳轉方法turn1() {// 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面uni.switchTab({// person.vue頁面路徑url: "/pages/person/person"})}}}
</script>

• 調用方法

<template><view><view><button @click="turn1()">欣賞小姐姐</button></view></view>
</template>

? 完整代碼：

<template><view><view><button @click="turn1()">欣賞小姐姐</button></view></view>
</template><script>export default {data() {return {}},methods: {// 定義跳轉方法turn1() {// 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面uni.switchTab({// person.vue頁面路徑url: "/pages/person/person"})}}}
</script><style></style>

• uni.switchTab(OBJECT)方法的具體講解可在uni-app官網中查看，在“API”中找到“頁面和路由”，再找到“uni.switchTab”

2.跳轉到非tabBar頁面

代碼：

uni.navigateTo({})

• html代碼：

<template><view><view><button>打開新頁面</button></view></view>
</template>

• js代碼：

<script>export default {data() {return {}},methods: {// 定義跳轉方法turn2(){//保留當前頁面，跳轉到應用內的某個頁面uni.navigateTo({//new.vue頁面路徑url:"/pages/new/new"})}}}
</script>

• 調用方法

<template><view><view><button @click="turn2()">打開新頁面</button></view></view>
</template>

• 完整代碼

  <template><view><view><button @click="turn2()">打開新頁面</button></view></view>
  </template><script>export default {data() {return {}},methods: {// 定義跳轉方法turn2(){//保留當前頁面，跳轉到應用內的某個頁面uni.navigateTo({//new.vue頁面路徑url:"/pages/new/new"})}}}
  </script><style></style>
  

• uni.navigateTo(OBJECT)方法的具體講解可在uni-app官網中查看，在“API”中找到“頁面和路由”，再找到“uni.navigateTo”