如何将url参数传递给Vuejs

Question

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

例如，当有人点击导致

domain.com/user/john-appleseed

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

什么是“正确/正确”的方式？

提前致谢！

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 部分中的 dash-notatinon 和 JS 中的 param name 差异为驼峰式。

Answer 3

如果你正在使用 vue-router 并且想要捕获查询参数并将它们传递给 props，你可以这样做。

被调用的网址： http://localhost:8080/#/?prop1=test1&prop2=test2

我的组件.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 4

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

要么使用 vue 的 $route：

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

或者你可以使用props解耦它

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