Vuejs

2015-09-14 20 views
8

पर यूआरएल पैरामीटर कैसे पास करें I laravel और VueJs के साथ एक ऐप बना रहा हूं और मैं सोच रहा था कि उपयोगकर्ता स्लग या यूजर आईडी जैसे यूआरएल पैरामीटर को कैसे उपयोग किया जा सकता है ताकि इसका उपयोग करने में सक्षम हो सके AJAX अनुरोध बनाने के लिए पैरामीटर?Vuejs

उदाहरण के लिए जब किसी व्यक्ति को लिंक

domain.com/user/john-appleseed 

के लिए अग्रणी रहा स्लग 'जॉन-एप्पलसीड' एक पैरामीटर के रूप के साथ मेरी vuejs आवेदन के भीतर एक ajax अनुरोध बनाना चाहते पर क्लिक करता है।

इस के लिए "सही/उचित" तरीका क्या है?

अग्रिम धन्यवाद!

+0

कैसे आप मार्ग निपटेंगे? Vue.js या Laravel के साथ? – Needpoule

+1

मैं –

+0

रूटिंग के लिए लार्वेल का उपयोग करता हूं क्षमा करें अगर मुझे समझ में नहीं आता है, जब उपयोगकर्ता लिंक पर क्लिक करता है, तो क्या आप पृष्ठ लोड करते हैं और फिर AJAX अनुरोध करते हैं या सीधे AJAX अनुरोध करते हैं? – Needpoule

उत्तर

1

आप अपने द्वारा क्लिक किए गए लिंक का यूआरएल प्राप्त कर सकते हैं और फिर अपने एजेक्स अनुरोध करने के लिए इस यूआरएल का उपयोग कर सकते हैं।

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

और अपने टेम्पलेट कॉल में इस विधि जब एक लिंक पर उपयोगकर्ता क्लिक:

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

मैं तुम्हें एक घटक निर्माण कर रहे हैं लगता है। मान लीजिए, आपके पास उस घटक के अंदर एक बटन है और जब क्लिक किया गया है, तो आप एक क्रिया (AJAX अनुरोध, या बस रीडायरेक्ट) करना चाहते हैं।

इस मामले में आप यूआरएल को घटक के पैरामीटर के रूप में पास करते हैं और आप इसे अंदर इस्तेमाल कर सकते हैं।

HTML:

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

आपका घटक जे एस:

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

तो फिर तुम this.loginUrl के रूप में घटक में परम पहुँच सकते हैं।

कृपया ध्यान दें कि HTML भाग में पैरा नाम का नाम डैश-नोटिनिन और जेएस में ऊंट के रूप में है।

+1

यह सुनिश्चित नहीं है कि आप get_url के साथ क्या कहना चाहते हैं, यह भ्रमित है, लेकिन विचार मान्य है – decebal

5

vue-router शायद यहां सहायता की जाएगी।

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

अपने Profile घटक के भीतर, अनुरोध किया उपयोगकर्ता के स्लग तो उपलब्ध this.$route.params.slug

के तहत बन जाएगा जानकारी के लिए आधिकारिक दस्तावेज की जाँच करें:: http://router.vuejs.org/en/

+0

धन्यवाद @jsphpl। मैंने पाया कि यह मूल्य '$। Path.params.slug' के बजाय 'this। $ Path.params.slug' के तहत उपलब्ध था। निश्चित नहीं है कि यह महत्वपूर्ण है, लेकिन मैं वू 2.0.3 का उपयोग कर रहा हूँ। – Tayler

+1

@ टायलर नोट के लिए धन्यवाद, इसे ठीक किया गया। – jsphpl

0

आप कर रहे हैं यह तुम इतनी तरह अपने मार्गों परिभाषित करने देता है वू-राउटर का उपयोग करके और क्वेरी पैरामीटर को कैप्चर करना और प्रोप को पास करना चाहते हैं, आप इसे इस तरह से कर सकते हैं।

यूआरएल बुलाया जा रहा है: 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> 

रूटर/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 
     }) 
    } 
    ] 
}) 
संबंधित मुद्दे