vue获取网址中的参数
时间: 2024-06-09 14:08:00 浏览: 66
VueJS 取得 URL 参数值的方法
5星 · 资源好评率100%
可以通过 `$route.query` 来获取当前路由的查询参数,例如:
```javascript
// 假设当前页面的网址是 http://example.com/?name=Bob&age=20
// 获取查询参数
const name = this.$route.query.name // Bob
const age = this.$route.query.age // 20
```
如果你需要在代码中获取路径参数,可以使用 `$route.params`。例如:
```javascript
// 假设当前页面的路由是 /user/:id
// 获取路径参数
const userId = this.$route.params.id
```
注意,如果你使用了 `vue-router` 的动态路由,那么路径参数将会作为参数传递给组件的 `props` 属性。例如:
```javascript
// 假设当前页面的路由是 /user/:id
// 在路由配置中定义 props
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
props: true
}
]
})
// 在组件中获取 props
export default {
props: ['id'],
// ...
}
```
在上面的例子中,路由参数 `id` 将会作为 `User` 组件的 `id` 属性传递进来。这样,你就可以通过 `this.id` 来获取路由参数了。
阅读全文