Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

vue获取url参数

作者:绝朢╭ァ   发布日期:2026-05-06   浏览:97

// 在 Vue 项目中获取 URL 参数可以通过多种方式实现,以下是几种常见的方法:

// 方法一:使用原生 JavaScript 的 URLSearchParams 对象
function getQueryParams() {
  const urlParams = new URLSearchParams(window.location.search);
  const params = {};
  for (const [key, value] of urlParams.entries()) {
    params[key] = value;
  }
  return params;
}

// 使用示例:
console.log(getQueryParams()); // 输出 URL 中的所有参数

// 方法二:使用 Vue Router(如果项目中使用了 Vue Router)
// 假设你已经在项目中配置了 Vue Router,并且当前页面是通过路由访问的
this.$route.query; // 这将返回一个包含所有 URL 查询参数的对象

// 使用示例:
// 如果 URL 是 http://example.com/page?name=vue&version=3.0
// this.$route.query 将返回 { name: 'vue', version: '3.0' }

// 方法三:使用第三方库,例如 qs 或者 lodash
// 需要先安装 qs 库:npm install qs
import qs from 'qs';

function getQueryParamsWithQs() {
  return qs.parse(window.location.search.replace('?', ''));
}

// 使用示例:
console.log(getQueryParamsWithQs()); // 输出 URL 中的所有参数

上一篇:vue3 $refs

下一篇:vue3 pinia使用

大家都在看

vue.js devtools用法

three.js vue

vue js for循环

vue.min.js 本地引入

vue.js 3

highlight.js vue

vue.config.js 配置

vue.config.js 配置代理

vue.config.js devserv

vue.config.js configu

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站