Question

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

例如，当有人点击指向

的链接时

domain.com/user/john-appleseed

我想在我的vuejs应用程序中使用slug＆＃39; john-appleseed＆＃39;进行ajax请求。作为参数。

＆＃34;对/正确＆＃34;是什么？这个方法呢？

提前致谢！

Answer 1

vue-router在这里可能会有所帮助。它允许您像这样定义路线：

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

在Profile组件中，所请求的用户的slug将在this.$route.params.slug

下可用

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

Answer 2

我想你正在构建一个组件。让我们说，你在该组件中有一个按钮，当你点击它时，你想要执行一个动作（AJAX请求，或者只是重定向）。

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

HTML：

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

你的组件JS：

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

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

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

Answer 3

您可以获取您点击的链接的网址，然后使用此网址来执行您的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 4

如果你正在使用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
      })
    }
  ]
})

Answer 5

使用Vue的$ route：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})

，或者您可以使用道具

将其解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // for routes with named views, you have to define the `props` option for each named view:
    {
      path: '/user/:id',
      components: {
        default: User,
        sidebar: Sidebar
      },
      props: {
        default: true,
        // function mode, more about it below
        sidebar: route => ({ search: route.query.q })
      }
    }
  ]
})

如何将url参数传递给Vuejs

5 个答案: