Cuando necesitas leer parámetros de la URL en una aplicación Vue.js, la primera idea que muchos desarrolladores tienen es ir directo a window.location.search. Y sí, funciona, pero en mi experiencia, no es siempre la solución más limpia ni la más "Vue-ish".
De hecho, si estás usando Vue Router, hay una forma mucho más integrada y reactiva de hacerlo. Esto me costó entenderlo bien al principio, de puro acostumbrado a las soluciones de JavaScript puro.
La ruta "Vue-ish": this.$route.query
Si tu proyecto usa Vue Router (que es lo más común), tienes acceso a un objeto $route dentro de tus componentes. Este objeto contiene toda la información de la ruta actual, incluyendo los parámetros de la query.
Acceder a ellos es súper directo:
// Si tu URL es: https://miweb.cl/productos?categoria=electronica&oferta=true
export default {
mounted() {
console.log(this.$route.query.categoria); // "electronica"
console.log(this.$route.query.oferta); // "true"
}
}
Lo bueno de esto es que $route es reactivo. Si la URL cambia (por ejemplo, al navegar a otra ruta con diferentes query params), tu componente reaccionará y se actualizará. Esto es clave para mantener la UI sincronizada con el estado de la URL sin mucho esfuerzo.
La solución universal: URLSearchParams
Ahora, si no estás usando Vue Router, o necesitas una solución que funcione fuera del contexto de Vue (por ejemplo, en un script vanilla o en una app con otro enrutador), la API nativa URLSearchParams es tu mejor amiga.
Esta es una solución robusta y estándar de JavaScript. Yo mismo la descubrí tarde, y es súper útil en muchos escenarios fuera de los frameworks.
// En cualquier componente o script, si tu URL es: https://miweb.cl/?id=123&tipo=premium
mounted() {
let urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('id')); // true
console.log(urlParams.get('id')); // "123"
console.log(urlParams.get('tipo')); // "premium"
console.log(urlParams.toString()); // "id=123&tipo=premium"
}
Este método es potente para parsear strings de query. Es JavaScript puro y duro, y funciona en cualquier navegador moderno.
¿Cuándo usar cuál? Un trade-off real
La elección depende mucho de tu contexto:
this.$route.query: Esta es mi opción por defecto dentro de una aplicación Vue que utiliza Vue Router. Es la forma más idiomática, te da reactividad "gratis" y mantiene tu código más alineado con el framework. Para mí, es la solución más elegante y menos propensa a errores cuando manejas navegación.URLSearchParams: Es excelente para proyectos sin frameworks, o cuando necesitas leer parámetros en un contexto donde Vue Router no está presente o no es relevante (ej: un script embebido, un microfrontend que no gestiona su propia ruta). También la uso para probar cosas rápido en la consola del navegador.
No te compliques de más. Si tienes Vue Router, usa this.$route.query. Si no, o si estás fuera del "ecosistema" de tu router, URLSearchParams es simple y funciona perfecto. Evita la sobreingeniería: la solución más sencilla que funciona y se adapta a tu stack es casi siempre la mejor.