URLパラメータをVuejsに渡す方法

Question

私はlaravelとVueJsを使ってアプリケーションを構築しています。ユーザーslugやユーザーIDのようなurlパラメータをvuejsに適切な方法で渡す方法が不思議でしたajaxリクエストを作成するためのパラメータ？例えば

誰かが

domain.com/user/john-appleseed 

につながるリンクをクリックしたときに、私はスラグと私のvuejsアプリケーション内でAJAXリクエストを作りたいパラメータとして「ジョン・アップルシード」。

「正しい/正しい」方法は何ですか？

ありがとうございます！

Answer 1

クリックしたリンクのURLを取得し、このURLを使用してajaxリクエストを行うことができます。

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> 

Answer 2

私はあなたがコンポーネントを構築しているとします。たとえば、そのコンポーネントの中にボタンがあり、クリックされたときにアクション（AJAXリクエストまたはリダイレクト）を実行するとします。

この場合、URLをコンポーネントのパラメータとして渡し、内部で使用することができます。

HTML：

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

あなたのコンポーネントJS：

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

次にあなたがthis.loginUrlとしてコンポーネントでのparamにアクセスすることができます。

HTMLの部分はdash-notatinonとして、JSではcamelCaseの部分が異なることに注意してください。

Answer 3

vue-routerここではおそらく助けになるでしょう。あなたがいる場合http://router.vuejs.org/en/

Answer 4

：

あなた Profileコンポーネント内

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

、要求されたユーザーのスラグはその後、詳細については、公式ドキュメントをチェックthis.$route.params.slug

の下で利用可能になるでしょう：それはあなたがそうのようなあなたのルートを定義することができますvue-routerを使用して、クエリパラメータを取得してそれらをpropsに渡したい場合は、この方法で実行できます。呼び出され

URL：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 
     }) 
    } 
    ] 
})