页面导航和路由管理

在 UniApp 中，页面导航和路由管理是构建多页面应用的关键部分。你将学会如何在应用中进行页面跳转、传递参数，并配置页面路由。

4. 页面导航和路由管理

4.1 页面跳转和传递参数

UniApp 提供了一系列 API 用于在页面间进行跳转和传递参数。常用的方法包括 uni.navigateTo、uni.redirectTo 和 uni.switchTab。

1. uni.navigateTo

uni.navigateTo 用于保留当前页面并跳转到应用内的某个页面，跳转成功后可以返回到原页面。

例子：

<!-- 首页 Home.vue -->
<template>
  <view>
    <button @click="goToDetails">Go to Details</button>
  </view>
</template>

<script>
export default {
  methods: {
    goToDetails() {
      uni.navigateTo({
        url: '/pages/details/details?itemId=123'
      });
    }
  }
}
</script>

<style>
/* 样式代码 */
</style>

<!-- 详情页 Details.vue -->
<template>
  <view>
    <text>Item ID: {{ itemId }}</text>
  </view>
</template>

<script>
export default {
  onLoad(query) {
    this.itemId = query.itemId;
  },
  data() {
    return {
      itemId: ''
    };
  }
}
</script>

<style>
/* 样式代码 */
</style>

解释：

• uni.navigateTo：跳转到 Details 页面，并通过 URL 参数传递 itemId=123。
• onLoad(query)：在 Details 页面接收传递的参数 itemId。

2. uni.redirectTo

uni.redirectTo 用于关闭当前页面并跳转到应用内的某个页面。适用于不希望返回到当前页面的场景。

例子：

<!-- 首页 Home.vue -->
<template>
  <view>
    <button @click="redirectToDetails">Go to Details</button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectToDetails() {
      uni.redirectTo({
        url: '/pages/details/details?itemId=456'
      });
    }
  }
}
</script>

<style>
/* 样式代码 */
</style>

解释：

• uni.redirectTo：跳转到 Details 页面并关闭当前页面。

3. uni.switchTab

uni.switchTab 用于跳转到指定的 tabBar 页面，并关闭其他页面。适用于 tabBar 导航的场景。

例子：

<!-- Tab 页面 TabPage.vue -->
<template>
  <view>
    <button @click="switchToHome">Go to Home</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchToHome() {
      uni.switchTab({
        url: '/pages/home/home'
      });
    }
  }
}
</script>

<style>
/* 样式代码 */
</style>

解释：

• uni.switchTab：跳转到 Home 页面（tabBar 页面），并关闭其他页面。

4.2 配置 pages.json 文件

pages.json 是 UniApp 项目的配置文件，用于定义页面的路由、窗口的表现等。

例子：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "Home Page"
      }
    },
    {
      "path": "pages/details/details",
      "style": {
        "navigationBarTitleText": "Details Page"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "Home"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "Contact"
      }
    ]
  }
}

解释：

• pages：定义了应用中的页面路径和样式。每个页面的 path 对应于 *.vue 文件的位置。
• tabBar：定义了 tabBar 的配置，包括 tabBar 项的 pagePath 和 text。

4.3 页面生命周期

在 UniApp 中，每个页面有自己的生命周期方法，类似于 Vue.js 的生命周期钩子。常用的生命周期方法包括 onLoad、onShow、onHide 和 onUnload。

1. onLoad

页面加载时触发，接收页面的 URL 参数。

2. onShow

页面显示时触发。

3. onHide

页面隐藏时触发。

4. onUnload

页面卸载时触发。

例子：

<template>
  <view>
    <text>Page Life Cycle</text>
  </view>
</template>

<script>
export default {
  onLoad(query) {
    console.log('Page Loaded with query:', query);
  },
  onShow() {
    console.log('Page Shown');
  },
  onHide() {
    console.log('Page Hidden');
  },
  onUnload() {
    console.log('Page Unloaded');
  }
}
</script>

<style>
/* 样式代码 */
</style>

解释：

• onLoad(query)：在页面加载时触发，并接收 URL 参数。
• onShow()：在页面显示时触发。
• onHide()：在页面隐藏时触发。
• onUnload()：在页面卸载时触发。

以上是 UniApp 中页面导航和路由管理的基础知识。通过学习如何在页面之间跳转、传递参数以及配置路由，你可以构建功能丰富的多页面应用。