当前位置：首页 > news >正文

vue怎么拿到url上的参数

news 2025/11/6 9:17:21

在 Vue 中获取 URL 参数有几种常用方法，具体取决于你的使用场景：

1. 使用 Vue Router（推荐）

查询参数（Query Parameters）

// URL: http://example.com/user?id=123&name=john// 在组件中获取
export default {created() {const id = this.$route.query.id;     // "123"const name = this.$route.query.name; // "john"console.log(id, name);}
}

路由参数（Route Params）

// 路由配置
const routes = [{ path: '/user/:id', component: User }
]// URL: http://example.com/user/123
export default {created() {const id = this.$route.params.id; // "123"console.log(id);}
}

使用组合式 API（Vue 3）

<template><div>用户ID: {{ userId }}</div>
</template><script setup>
import { useRoute } from 'vue-router'const route = useRoute()
const userId = route.params.id || route.query.id
</script>

2. 原生 JavaScript 方法

使用 URLSearchParams

export default {methods: {getUrlParams() {const urlParams = new URLSearchParams(window.location.search)return {id: urlParams.get('id'),name: urlParams.get('name')}}},created() {const params = this.getUrlParams()console.log(params.id, params.name)}
}

传统 URL 解析

export default {methods: {getQueryVariable(variable) {const query = window.location.search.substring(1)const vars = query.split('&')for (let i = 0; i < vars.length; i++) {const pair = vars[i].split('=')if (pair[0] === variable) {return decodeURIComponent(pair[1])}}return null}},created() {const id = this.getQueryVariable('id')const name = this.getQueryVariable('name')}
}

3. 监听参数变化

export default {watch: {'$route.query': {handler(newQuery) {// 查询参数变化时执行console.log('参数变化:', newQuery)},immediate: true // 立即执行一次},'$route.params': {handler(newParams) {// 路由参数变化时执行console.log('路由参数变化:', newParams)},immediate: true}}
}

4. 完整示例

<template><div><h2>用户信息</h2><p>用户ID: {{ userId }}</p><p>用户名: {{ userName }}</p></div>
</template><script>
export default {data() {return {userId: null,userName: null}},created() {this.getParams()},watch: {'$route': 'getParams' // 路由变化时重新获取参数},methods: {getParams() {// 优先使用路由参数，其次使用查询参数this.userId = this.$route.params.id || this.$route.query.idthis.userName = this.$route.query.nameconsole.log('用户ID:', this.userId)console.log('用户名:', this.userName)}}
}
</script>