如何将url参数传递给Vuejs

I'm building an app with laravel and VueJs and I was wondering how to pass a url parameter like the user slug or the user id to vuejs in a proper way to be able to use that parameter for making ajax requests?

我正在用laravel和VueJs构建一个应用程序，我想知道如何将一个url参数(比如用户段或用户id)以合适的方式传递给VueJs，以便能够使用这个参数进行ajax请求?

For example when someone clicks on a link leading to

例如，当某人单击指向的链接时

domain.com/user/john-appleseed

I want to make an ajax request within my vuejs application with the slug 'john-appleseed' as a parameter.

我想在我的vuejs应用程序中发出一个ajax请求，参数是slug“john-appleseed”。

What is the "right/proper" way to this?

什么是“正确/适当”的方式?

Thanks in advance!

提前谢谢!

4 个解决方案

#1

vue-router would probably be of help here. It lets you define your routes like so:

vue-router也有帮助。它可以让你这样定义你的路线:

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

Within your Profile component, the requested user's slug would then become available under this.$route.params.slug

在您的配置文件组件中，被请求用户的蛞蝓会在这个$route.params.slug下可用

Check the official documentation for details: http://router.vuejs.org/en/

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

#2

I suppose you are building a component. Let's say, you have a button inside that component and when is clicked, you wanna perform an action (AJAX request, or just redirect).

我想你正在构建一个组件。假设在该组件内部有一个按钮，当被单击时，您希望执行一个操作(AJAX请求，或者只是重定向)。

In this case you pass the URL as parameter to the component and you can use it inside.

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

HTML:

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

Your component JS:

您的组件JS:

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

Then you can access the param in the component as this.loginUrl.

然后可以以this.loginUrl的形式访问组件中的参数。

Please notice that param name difference in HTML part as dash-notatinon and in JS as camelCase.

请注意HTML部分中的param名称差异为dash-notatinon, JS中为camelCase。

#3

You can get the url of the link you click and then use this url to do your ajax request.

您可以获得单击的链接的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 
        });
    },
},

And in your template call this method when the user click on a link:

在你的模板中，当用户点击一个链接时，调用这个方法:

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

#4

If you are using vue-router and want to capture query parameters and pass them to props, you can do it this way.

如果您正在使用vue-router，并且希望捕获查询参数并将它们传递给道具，那么可以这样做。

Url being called : http://localhost:8080/#/?prop1=test1&prop2=test2

被调用的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>

router/index.js

路由器/ 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
      })
    }
  ]
})

#1