javascript - props - ¿Cómo puedo obtener parámetros de consulta de una URL en Vue.js?

vue-router props

Question

¿Cómo puedo obtener parámetros de consulta en Vue.js?

Por ejemplo, http://somesite.com?test=yay .

¿No puedo encontrar una manera de buscar o necesito usar JS puro o alguna biblioteca para esto?

Answer 1

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 función beforeRouteEnter no podemos acceder a las propiedades del componente como: this.propertyName Es por eso que he pasado el vm a la next función. Es la forma recomendada de acceder a la instancia de vue. En realidad, el vm significa instancia de vue

Answer 2

A partir de esta fecha, la forma correcta es (no sé por qué han cambiado):

this.$route.params.yourProperty instead of this.$route.query.yourProperty

Docs

Answer 3

De acuerdo con los documentos del objeto route , tiene acceso a un objeto $route desde sus componentes, que expone lo que necesita. En este caso

//from your component
console.log(this.$route.query.test) // outputs ''yay''

Answer 4

Otra forma (suponiendo que esté utilizando 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
}
},

Entonces estará disponible como this.foo y puede hacer lo que quiera con él (como configurar un observador, etc.)

Answer 5

Respuesta más detallada para ayudar a los novatos de VueJs.

<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)
},
});

Answer 6

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(){
},