Uniapp跳转页面的方法详解

1. Uniapp 跳转页面的方法概述

今天我们来分享 Uniapp 跳转页面的相关内容。Uniapp 提供了多种跳转页面的方法，如路由跳转、页面间传参等。下面将具体介绍 Uniapp 跳转页面的方法。

2. 路由跳转

2.1. 通过 URL 进行跳转

使用 URL 进行跳转，可以通过 uni.navigateTo 或 uni.redirectTo 方法实现。

// navigateTo 方法
uni.navigateTo({url: 'pages/home/home'})
// redirectTo 方法
uni.redirectTo({url: 'pages/home/home'})

其中，navigateTo 方法是在当前页面打开新页面，并且在新页面返回时可以回到当前页面；而 redirectTo 方法是在新页面打开，并且在新页面返回时无法回到之前的页面。

2.2. 通过 name 进行跳转

使用 name 进行跳转，需要在 router/index.js 文件中定义路由表，然后在页面中使用 uni.navigateTo 或 uni.redirectTo 方法跳转。

// router/index.js
const routes = [
  {
    path: '/home',
    name: 'home',
    component: () => import('@/pages/home/home.vue')
  }
]
// pages/index/index.vue
uni.navigateTo({name: 'home'})

其中，name 指的是路由表中定义的页面名称，component 指的是该页面对应的组件文件。

3. 页面间传参

在页面间传参时，可以使用 query、params 或 props 等多种方法。

3.1. 通过 query 进行传参

通过 query 进行传参，需要在 URL 中添加参数。

uni.navigateTo({
  url: 'pages/home/home?id=123&name=zhangsan'
})

在 home.vue 文件中，可以通过以下方式获取参数：

export default {
  onLoad(options) {
    console.log(options.id) // 输出 123
    console.log(options.name) // 输出 zhangsan
  }
}

3.2. 通过 params 进行传参

通过 params 进行传参，需要在路由表中定义参数。

// router/index.js
const routes = [
  {
    path: '/home/:id/:name',
    name: 'home',
    component: () => import('@/pages/home/home.vue')
  }
]
// pages/index/index.vue
uni.navigateTo({
  name: 'home',
  params: {
    id: 123,
    name: 'zhangsan'
  }
})

在 home.vue 文件中，可以通过以下方式获取参数：

export default {
  onLoad(route) {
    console.log(route.params.id) // 输出 123
    console.log(route.params.name) // 输出 zhangsan
  }
}

3.3. 通过 props 进行传参

通过 props 进行传参，可以将数据直接传递给组件。

// pages/index/index.vue
<template>
  <home :id="123" :name="'zhangsan'" />
</template>
// pages/home/home.vue
<template>
  <div>
    {{ id }} // 输出 123
    {{ name }} // 输出 zhangsan
  </div>
</template>
<script>
export default {
  props: ['id', 'name']
}
</script>

4. 总结

通过本文的介绍，我们了解了 Uniapp 跳转页面的方法以及页面间传参的多种方式。在开发过程中，应根据实际需要选择合适的方法进行跳转页面和传递参数。