小程序vue3语法获取页面路由参数方法
时间: 2024-10-08 11:11:55 浏览: 42
uniapp + vue3 + vite 开发壁纸小程序、H5、安卓App
在Vue 3的小程序中,获取页面路由参数通常通过`this.$route.query`或`this.$route.params`来完成。这两个属性分别对应URL查询字符串(key-value对形式,如 '?param1=value1¶m2=value2')和路径参数(动态片段,如 '/user/:userId' 中的 `:userId`),它们都是响应式的。
以下是获取特定路由参数的基本步骤:
1. 首先,在组件的`setup()`生命周期钩子函数中注入`useRoute`,这是Vue Router提供的API:
```js
import { useRoute } from 'vue-router'
setup() {
const route = useRoute()
//...
}
```
2. 然后,你可以直接访问`route.query`或`route.params`:
- 获取查询字符串参数:
```js
const paramFromQuery = route.query.yourParamName
```
- 获取路径参数:
```js
const paramFromPath = route.params.userId
```
阅读全文