在 UniApp 中，路由管理是构建应用的核心部分，它允许你在不同页面之间进行跳转和数据传递。本文将详细讲解 UniApp 的路由与导航，包括页面跳转、URL 参数传递、动态路由和嵌套路由的使用。

1. 页面跳转

在 UniApp 中，可以使用以下方法进行页面跳转：

• uni.navigateTo：用于打开新页面。
• uni.redirectTo：用于关闭当前页面并跳转到新页面。
• uni.switchTab：用于跳转到 tabBar 页面。

示例代码：

<template>
  <view>
    <button @click="navigateToPage">前往详情页</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPage() {
      uni.navigateTo({
        url: '/pages/detail/detail'
      });
    }
  }
};
</script>

在上面的代码中，当用户点击按钮时，将调用 navigateToPage 方法，使用 uni.navigateTo 方法跳转到 detail 页面。

2. URL 参数传递

在进行页面跳转时，可以通过 URL 传递参数，以便在目标页面中使用。参数会以查询字符串的形式传递。

示例代码：

页面 A (source.vue)：

<template>
  <view>
    <button @click="goToDetail">查看详情</button>
  </view>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      const itemId = 123; // 示例参数
      uni.navigateTo({
        url: `/pages/detail/detail?id=${itemId}`
      });
    }
  }
};
</script>

页面 B (detail.vue)：

<template>
  <view>
    <text>接收到的 ID: {{ itemId }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemId: null
    };
  },
  onLoad(options) {
    this.itemId = options.id; // 获取 URL 参数
  }
};
</script>

在这个例子中，点击按钮时，页面 A 会跳转到页面 B，并传递参数 id。页面 B 使用 onLoad 生命周期钩子获取该参数。

3. 动态路由和嵌套路由

动态路由允许我们根据参数渲染不同的页面内容，而嵌套路由则使得页面结构更加灵活。

动态路由示例：

路由配置（在 pages.json 文件中）：

{
  "pages": [
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ]
}

页面 B (detail.vue)：

<template>
  <view>
    <text>详细信息：{{ itemId }}</text>
    <button @click="goBack">返回</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemId: null
    };
  },
  onLoad(options) {
    this.itemId = options.id; // 获取 URL 参数
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

嵌套路由示例：

如果你有多个子页面，可以在父页面中使用 <router-view> 来进行嵌套路由。

父页面 (parent.vue)：

<template>
  <view>
    <text>父页面</text>
    <button @click="goToChild">前往子页面</button>
    <router-view></router-view> <!-- 嵌套路由 -->
  </view>
</template>

<script>
export default {
  methods: {
    goToChild() {
      uni.navigateTo({
        url: '/pages/child/child'
      });
    }
  }
};
</script>

子页面 (child.vue)：

<template>
  <view>
    <text>这是子页面</text>
    <button @click="goBack">返回父页面</button>
  </view>
</template>

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

总结

在 UniApp 中，路由管理为应用提供了良好的页面跳转和数据传递机制。通过页面跳转、URL 参数传递、动态路由和嵌套路由的使用，你可以轻松地构建复杂的应用结构，提升用户体验。掌握这些路由与导航的基本操作后，你将能更好地管理应用中的页面逻辑。