Come passare i parametri url a Vuejs

Question

Sto costruendo un'applicazione con laravel e VueJs e mi chiedevo come passare un parametro url come lo slug dell'utente o l'id utente a vuejs in modo corretto per poterlo usare parametro per fare richieste ajax?

Per esempio, quando un utente fa clic su un link che porta a

domain.com/user/john-appleseed 

Voglio fare una richiesta AJAX all'interno della mia applicazione vuejs con la lumaca 'john-Appleseed' come parametro.

Qual è il modo "giusto/corretto" per questo?

Grazie in anticipo!

Answer 1

È possibile ottenere l'url del collegamento su cui si fa clic e quindi utilizzare questo URL per effettuare la richiesta Ajax.

methods: { 
    load: function(elem, e) { 
     e.preventDefault(); 
     var url = e.target.href; 
     this.$http.get(url, function (data, status, request) { 
      // update your vue 
     }); 
    }, 
}, 

E nella chiamata modello di questo metodo quando l'utente clicca su un link:

<a href="domain.com/user/john-appleseed" v-on="click: load">link</a> 

Answer 2

Suppongo che si sta costruendo un componente. Diciamo che hai un pulsante all'interno di quel componente e quando viene cliccato, vuoi eseguire un'azione (richiesta AJAX o semplicemente reindirizzamento).

In questo caso si passa l'URL come parametro al componente ed è possibile utilizzarlo all'interno.

HTML:

<my-component login-url="get_url('url_token')"> 

I suoi componenti JS:

export default { 
    props: { 
     loginUrl: {required: true}, 
    }, 
    ... 
} 

Quindi è possibile accedere al param nel componente come this.loginUrl.

Si noti che la differenza del nome param nella parte HTML come dash-notatinon e in JS come camelCase.

Answer 3

vue-router sarebbe probabilmente di aiuto qui. Esso consente di definire i percorsi in questo modo:

router.map({ 
    '/user/:slug': { 
     component: Profile, 
     name: 'profile' 
    }, 
}) 

Entro il componente Profile, lumaca dell'utente richiesto sarebbe poi diventato disponibile sotto this.$route.params.slug

Controllare la documentazione ufficiale per maggiori dettagli: http://router.vuejs.org/en/

Answer 4

Se sei usando vue-router e vuoi acquisire parametri di query e passarli a oggetti di scena, puoi farlo in questo modo.

Url essere chiamato: http://localhost:8080/#/?prop1=test1&prop2=test2

MyComponent.vue

<template> 
    <div> 
    {{prop1}} {{prop2}} 
    </div> 
</template> 
<script> 
    export default { 
    name: 'MyComponent', 
    props: { 
     prop1: { 
     type: String, 
     required: true 
     }, 
     prop2: { 
     type: String, 
     default:'prop2' 
     } 
    } 
</script> 
<style></style> 

router/index.js

import Vue from 'vue' 
import Router from 'vue-router' 
import MyComponent from '@/components/MyComponent' 

Vue.use (Router) 
Vue.component ('my-component', MyComponent) 

export default new Router ({ 
    routes: [ 
    { 
     path: '/', 
     name: 'MyComponent', 
     component: MyComponent, 
     props: (route) => ({ 
     prop1: route.query.prop1, 
     prop2: route.query.prop2 
     }) 
    } 
    ] 
})