首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue获取url参数

vue获取url上参数的常见方法小结

2025-11-06 08:43:41 作者：悟能不能悟

这篇文章主要为大家详细介绍了vue获取url上参数的几种常用方法,这些方法主要取决于你的使用场景,下面小编就和大家详细介绍一下吧

在 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.id
      this.userName = this.$route.query.name
      
      console.log('用户ID:', this.userId)
      console.log('用户名:', this.userName)
    }
  }
}
</script>

使用建议

优先使用 Vue Router - 更加集成和方便
考虑参数类型转换 - URL 参数都是字符串，需要时进行类型转换
处理参数不存在的情况 - 添加适当的默认值或错误处理
监听参数变化 - 如果需要在同一组件内响应参数变化

选择哪种方法主要取决于你的项目是否使用了 Vue Router 以及具体的业务需求。

到此这篇关于vue获取url上参数的常见方法小结的文章就介绍到这了,更多相关vue获取url参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！