web-dev-qa-db-fra.com

Comment passer les paramètres d'URL à Vuejs

Je construis une application avec laravel et VueJs et je me demandais comment passer un paramètre d'URL comme l'utilisateur slug ou l'id utilisateur à vuejs de manière à pouvoir utiliser ce paramètre pour faire des requêtes ajax?

Par exemple, lorsque quelqu'un clique sur un lien menant à

domain.com/user/john-appleseed

Je veux faire une requête ajax dans mon application vuejs avec le slug 'john-appleseed' comme paramètre.

Quelle est la "bonne/bonne" façon de procéder?

Merci d'avance!

phpajaxurlvue.js
10
Luuk Van Dongen

vue-router serait probablement utile ici. Il vous permet de définir vos itinéraires comme suit:

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

Dans votre composant Profile, le slug de l'utilisateur demandé serait alors disponible sous this.$route.params.slug

Consultez la documentation officielle pour plus de détails: http://router.vuejs.org/en/

5
jsphpl

Je suppose que vous construisez un composant. Disons que vous avez un bouton à l'intérieur de ce composant et que lorsque vous cliquez dessus, vous voulez exécuter une action (demande AJAX ou simplement rediriger).

Dans ce cas, vous transmettez l'URL en tant que paramètre au composant et vous pouvez l'utiliser à l'intérieur.

HTML:

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

Votre composant JS:

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

Ensuite, vous pouvez accéder au paramètre dans le composant en tant que this.loginUrl.

Veuillez noter que la différence de nom de paramètre dans la partie HTML en tant que dash-notatinon et dans JS en tant que camelCase.

4
n1_

Vous pouvez obtenir l'URL du lien sur lequel vous cliquez, puis utiliser cette URL pour effectuer votre demande ajax.

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

Et dans votre modèle, appelez cette méthode lorsque l'utilisateur clique sur un lien:

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

Si vous utilisez vue-router et souhaitez capturer des paramètres de requête et les transmettre à des accessoires, vous pouvez le faire de cette façon.

Url étant appelée: http: // localhost: 8080/# /? Prop1 = test1 & prop2 = test2

MonComponent.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>

routeur/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
      })
    }
  ]
})
0
Marc Bouvier