uniapp路由跳转携带参数

在uniApp中，路由跳转并携带参数通常通过`this.$router.push`或`this.$router.replace`方法来完成。你可以传递一个对象作为参数，这个对象的键通常是你要传递的参数名，值是具体的参数值。以下是基本的示例：

// 使用push方法（会添加到浏览器历史记录）
this.$router.push({
  path: '/target-page', // 目标页面路径
  query: { key1: 'value1', key2: 'value2' } // 查询参数
})

// 或者使用replace方法（不会添加到浏览器历史记录）
this.$router.replace({
  path: '/target-page',
  params: { paramKey: 'paramValue' } // 路由参数（区别于查询参数，放在path中）
})

在这个例子中，目标页面可以根据查询参数`key1`和`key2`的不同内容动态加载数据。如果你想要在URL中隐藏某些敏感信息，可以使用`params`来传递路由参数，它们会被编码在路径中。

相关问题

uniapp跳转页面携带参数，新页面如何获取参数 我使用了script setup

在uni-app中，如果你需要在跳转页面时携带参数，并在目标页面通过JavaScript获取这些参数，可以使用`this.$route.query`对象。`query`属性用于存储URL查询字符串，也就是URL中问号后面的部分。下面是一个简单的示例：

<!-- 跳转页面的组件 -->
<template>
  <button @click="redirectToPage">点击跳转</button>
</template>

<script setup>
import { useRouter } from '@/uni-app/router'

function redirectToPage() {
  const router = useRouter()
  router.push({
    path: '/targetPage', // 目标页面路径
    query: {
      key1: 'value1', // 参数1
      key2: 'value2' // 参数2
    }
  })
}
</script>

然后，在目标页面（如`pages/targetPage.vue`），你可以这样获取参数：

<!-- targetPage.vue -->
<template>
  <div>
    <p>参数key1的值：{{ $route.query.key1 }}</p>
    <p>参数key2的值：{{ $route.query.key2 }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {
    console.log('当前路由查询参数:', this.$route.query) // 这里会打印所有查询参数
  }
}
</script>

uniapp路由点击跳转

### UniApp 实现页面路由点击跳转方法

#### 使用 `uni.navigateTo` 进行页面跳转

当需要从当前页面跳转至新的页面并保留返回能力时，可以使用 `uni.navigateTo` 函数。此函数允许传递目标页面的路径作为参数，并支持携带查询字符串。

// 假设要跳转到 pages/detail/index 页面，并附带 id 参数
uni.navigateTo({
    url: '/pages/detail/index?id=1'
});

该方式适用于非 tabBar 类型页面间的切换[^2]。

#### 利用按钮触发页面跳转事件

为了使用户交互更加直观友好，通常会将上述逻辑绑定到界面上某个控件（如按钮）上：

<!-- 组件模板部分 -->
<button type="primary" @click="navigateToDetail">查看详情</button>

export default {
    methods: {
        navigateToDetail() {
            uni.navigateTo({
                url: '/pages/detail/index?id=' + this.itemId,
            });
        }
    },
    data() {
        return {
            itemId: 1, // 示例数据项ID
        };
    }
}

以上代码展示了如何定义一个带有点击处理程序的方法来执行页面导航操作[^1]。

#### 跳转至 tabBar 页面

对于想要访问底部标签栏内的页面，则应采用 `switchTab` API 来完成这一动作。需要注意的是，只有被标记为 tabBar 的页面才可以通过这种方式到达。

uni.switchTab({
    url: '/pages/tabBar/home/index',
});

这里假设 `/pages/tabBar/home/index` 是其中一个 tab 对应的目标地址[^3]。