uni-app vue3版本 page.json中的路由path，是否可以通过设置占位符的方式设置参数？

在 uni-app 的 Vue 3 版本中，page.json 中的路由 path 并不直接支持通过占位符的方式设置参数。不过，你可以通过编程的方式在页面的跳转过程中传递参数，并在目标页面中通过 this.$route.params 或 getCurrentPages() 方法获取这些参数。

虽然 page.json 中的路径配置不支持占位符，但你可以通过动态跳转的方式来实现类似的效果。下面是一个简单的示例，展示如何在 uni-app 中实现带参数的页面跳转和接收参数。

示例代码

1. 配置 page.json

首先，在 page.json 中配置两个页面，例如 pages/home/home 和 pages/detail/detail。

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "Home"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "Detail"
      }
    }
  ]
}

2. 在 Home 页面中跳转并传递参数

在 pages/home/home.vue 中，你可以使用 uni.navigateTo 方法进行页面跳转，并传递参数。

<template>
  <view>
    <button @click="navigateToDetail">Go to Detail</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToDetail() {
      uni.navigateTo({
        url: '/pages/detail/detail?id=123&name=example'
      });
    }
  }
}
</script>

3. 在 Detail 页面中接收参数

在 pages/detail/detail.vue 中，你可以通过 this.$route.params 或 getCurrentPages() 方法获取传递过来的参数。注意，由于 uni-app 的路由参数是通过 URL 传递的，因此应该使用 this.$route.query 而不是 this.$route.params。

<template>
  <view>
    <text>ID: {{ id }}</text>
    <text>Name: {{ name }}</text>
  </view>
</template>

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

在这个示例中，当点击 Home 页面中的按钮时，会跳转到 Detail 页面，并传递 id 和 name 参数。Detail 页面会在 onLoad 生命周期钩子中接收这些参数，并将其存储在组件的 data 中以供使用。