¿Cómo puedo obtener los parámetros de consulta en Vue.js?
Por ej http://somesite.com?test=yay
.
¿No puedo encontrar una manera de buscar o necesito usar JS puro o alguna biblioteca para esto?
¿Cómo puedo obtener los parámetros de consulta en Vue.js?
Por ej http://somesite.com?test=yay
.
¿No puedo encontrar una manera de buscar o necesito usar JS puro o alguna biblioteca para esto?
Respuestas:
De acuerdo con los documentos del objeto de ruta , tiene acceso a un $route
objeto desde sus componentes, que exponen lo que necesita. En este caso
//from your component
console.log(this.$route.query.test) // outputs 'yay'
vue-router
esto sería un duplicado, ya que necesitará usar métodos JS estándar.
vue-router
etiqueta y la agregué.
return next({ name: 'login', query:{param1: "foo" }, });
no funciona. dentro del componente de inicio de sesión, el accesorio param1
no está definido.
Sin vue-route, divida la URL
var vm = new Vue({
....
created()
{
let uri = window.location.href.split('?');
if (uri.length == 2)
{
let vars = uri[1].split('&');
let getVars = {};
let tmp = '';
vars.forEach(function(v){
tmp = v.split('=');
if(tmp.length == 2)
getVars[tmp[0]] = tmp[1];
});
console.log(getVars);
// do
}
},
updated(){
},
Otra solución https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search :
var vm = new Vue({
....
created()
{
let uri = window.location.search.substring(1);
let params = new URLSearchParams(uri);
console.log(params.get("var_name"));
},
updated(){
},
location.href
cuando hay location.search
fácilmente disponible? developer.mozilla.org/en-US/docs/Web/API/… p.ej. var querypairs = window.location.search.substr(1).split('&');
También dividir los pares de nombre-valor de consulta por '=' no siempre funcionará, ya que también puede pasar parámetros de consulta con nombre sin valor; Por ejemplo, ?par1=15&par2
su código ahora generaría una excepción en par2 ya que la división por '=' dará como resultado tmp con solo 1 elemento.
undefined
a getVars['par2']
.
Respuesta más detallada para ayudar a los novatos de VueJS:
Y el código en sí:
<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var vm = new Vue({
router,
el: '#app',
mounted: function() {
q = this.$route.query.q
console.log(q)
},
});
<script src="https://unpkg.com/vue-router"></script>
new Vue({ router, ... })
No es una sintaxis válida.
Otra forma (suponiendo que esté usando vue-router
), es asignar el parámetro de consulta a un accesorio en su enrutador. Entonces puedes tratarlo como cualquier otro accesorio en tu código de componente. Por ejemplo, agregue esta ruta;
{
path: '/mypage',
name: 'mypage',
component: MyPage,
props: (route) => ({ foo: route.query.foo })
}
Luego, en su componente, puede agregar el accesorio normalmente;
props: {
foo: {
type: String,
default: null
}
},
Luego estará disponible como this.foo
y puede hacer lo que quiera con él (como configurar un observador, etc.)
A partir de esta fecha, la forma correcta de acuerdo con los documentos de enrutamiento dinámico es:
this.$route.params.yourProperty
en vez de
this.$route.query.yourProperty
query
para obtener las consultas de la URL. De los documentos: además de $ route.params, el objeto $ route también expone otra información útil como $ route.query (si hay una consulta en la URL)
Puede usar vue-router. Tengo un ejemplo a continuación:
url: www.example.com?name=john&lastName=doe
new Vue({
el: "#app",
data: {
name: '',
lastName: ''
},
beforeRouteEnter(to, from, next) {
if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
next(vm => {
vm.name = to.query.name
vm.lastName = to.query.lastName
})
}
next()
}
})
Nota: en la beforeRouteEnter
función no podemos acceder a las propiedades del componente como:. this.propertyName
Es por eso que he pasado vm
a la next
función. Es la forma recomendada de acceder a la instancia de vue. En vm
realidad, es la instancia de vue.
Puede obtener mediante el uso de esta función.
console.log(this.$route.query.test)
Si su servidor usa php, puede hacer esto:
const from = '<?php echo $_GET["from"];?>';
Solo funciona