如何將URL參數傳遞給Vuejs

我正在構建一個應用程序與laravel和VueJs，我想知道如何傳遞一個URL參數像用戶slug或用戶ID vuejs以正確的方式能夠使用用於製作Ajax請求的參數？如何將URL參數傳遞給Vuejs

例如，當有人點擊導致

domain.com/user/john-appleseed

我想我與塞「約翰 - 蘋果核戰記」作爲參數vuejs應用程序中的一個Ajax請求中的鏈接。

什麼是「正確/適當」的方式呢？

在此先感謝！

來源

2015-09-14 Luuk Van Dongen

你是如何處理的路由呢？用vue.js還是Laravel？ – Needpoule

我使用laravel進行路由 –

對不起，如果我不明白，當用戶點擊鏈接時，你是加載頁面然後發出ajax請求還是直接發出ajax請求？ – Needpoule

你可以得到你點擊的鏈接的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>

來源

2015-09-14 12:36:39 Needpoule

我想你正在建設一個組成部分。比方說，你在該組件中有一個按鈕，當你點擊時，你想執行一個動作（AJAX請求，或者只是重定向）。

在這種情況下，您將URL作爲參數傳遞給組件，您可以在其中使用它。

HTML：

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

您的組件JS：

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

然後你就可以在組件訪問帕拉姆爲this.loginUrl。

請注意，HTML部分中的參數名稱差異爲dash-notatin，而在JS中則爲camelCase。

來源

2016-01-26 17:38:58 grafa

不知道你想說什麼get_url，這有點令人困惑，但這個想法是有效的 – decebal

vue-router在這裏可能會有所幫助。它允許您定義您的路線，像這樣：

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

在您Profile組件，請求用戶的金屬塊隨後將變得可用下this.$route.params.slug

詳情請查看官方文檔：http://router.vuejs.org/en/

來源

2016-05-11 10:03:59 jsphpl

謝謝@ jsphpl。我發現該值在'this。$ route.params.slug'下可用，而不是'$ route.params.slug'。不知道它是否重要，但我使用Vue 2.0.3。 – Tayler

@Tayler感謝你的提示，修正了它。 – jsphpl

如果你是使用vue-router並希望捕獲查詢參數並將它們傳遞給道具，您可以這樣做。

網址被稱爲：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 
     }) 
    } 
    ] 
})

來源

2017-10-17 15:52:00

如何將URL參數傳遞給Vuejs

回答

相關問題