如何将url参数传递给Vuejs

Question

我正在使用laravel和VueJs构建一个应用程序,我想知道如何以适当的方式将url参数(如用户slug或用户id)传递给vuejs,以便能够使用该参数进行ajax请求？

例如,当有人点击导致的链接时

domain.com/user/john-appleseed

我想在我的vuejs应用程序中使用slug'john-appleseed'作为参数来发出ajax请求.

什么是"正确/适当"的方式？

提前致谢!

Answer 1

我想你正在构建一个组件。假设您在该组件中有一个按钮，当被点击时，您想要执行一个操作（AJAX 请求，或者只是重定向）。

在这种情况下，您将 URL 作为参数传递给组件，您可以在内部使用它。

HTML：

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

您的组件 JS：

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

然后你可以访问组件中的 param as this.loginUrl。

请注意，HTML 部分中的 dash-notatinon 和 JS 中的 param name 差异为驼峰式。

Answer 2

vue-router可能在这里有所帮助.它允许您定义您的路线,如下所示:

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

在您的Profile组件中,所请求的用户的slug随后将变为可用this.$route.params.slug

查看官方文档了解详细信息:http://router.vuejs.org/en/

Answer 3

您可以获取您单击的链接的 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>