Jak przekazać parametry adresu URL do Vuejs

Question

Buduję aplikację z Laravel i VueJs i zastanawiałem się, jak przekazać parametr url, taki jak user slug lub identyfikator użytkownika do vuejs, w odpowiedni sposób, aby móc z niego korzystać parametr do wysyłania zapytań ajaxowych?

Na przykład, gdy ktoś kliknie na link prowadzący do

domain.com/user/john-appleseed 

Chcę złożyć wniosek ajax w moim vuejs aplikacji z ślimaka John-Appleseed "jako parametr.

Jaki jest "właściwy/właściwy" sposób na to?

Z góry dziękuję!

Answer 1

Możesz uzyskać adres URL klikniętego łącza, a następnie użyć tego adresu URL do wykonania żądania ajax.

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

I w wywołaniu szablonu ten sposób, gdy użytkownik kliknie na link:

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

Answer 2

Przypuszczam budujesz komponent. Załóżmy, że masz przycisk wewnątrz tego komponentu i po kliknięciu chcesz wykonać akcję (żądanie AJAX lub po prostu przekierowanie).

W tym przypadku przekazujesz URL jako parametr do komponentu i możesz go użyć w środku.

HTML:

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

komponentu JS:

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

Następnie można uzyskać dostęp do param w składniku jak this.loginUrl.

Proszę zauważyć różnicę nazwy paramu w części HTML jako dash-notatinon oraz w JS jako camelCase.

Answer 3

prawdopodobnie będzie pomocne tutaj. To pozwala określić swoje trasy tak:

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

W ramach komponentu Profile, ślimak na poszukiwane autora będzie wtedy stają się dostępne pod this.$route.params.slug

Sprawdź oficjalnej dokumentacji szczegóły: http://router.vuejs.org/en/

Answer 4

Jeżeli jesteś używając vue-routera i chcesz uchwycić parametry zapytania i przekazać je do rekwizytów, możesz to zrobić w ten sposób.

Url miano: 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> 

routera/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 
     }) 
    } 
    ] 
})