如何将url参数传递给Vuejs答案

【问题标题】：How to pass url parameters to Vuejs如何将url参数传递给Vuejs
【发布时间】：2015-12-10 04:22:26
【问题描述】：

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

例如，当有人点击指向的链接时

domain.com/user/john-appleseed

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

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

提前致谢！

【问题讨论】：

如何处理路由？使用 vue.js 还是 Laravel？
我使用 laravel 进行路由
对不起，如果我不明白，当用户点击链接时，你是加载页面然后发出ajax请求还是直接发出ajax请求？
如果用户访问一个页面，那么我想发出一个 ajax 请求来加载数据，而不是使用 laravel 将其传递给视图。这样我可以使用 vuejs 中的数据来读取/添加/删除/更新/显示数据。但是要发出 ajax 请求（通过 vue-resource），我需要传递一个带有用户标识符的参数。现在 url 有参数，我想在我的 vue 实例中将它传递给 ajax get 请求。我该怎么做？

标签： php ajax url vue.js

【解决方案1】：

要么使用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 })
      }
    }
  ]
})

【讨论】：

【解决方案2】：

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

被调用的网址：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
      })
    }
  ]
})

【讨论】：

【解决方案3】：

vue-router 在这里可能会有所帮助。它可以让你像这样定义你的路线：

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

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

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

【讨论】：

谢谢@jsphpl。我发现该值在this.$route.params.slug 下可用，而不是$route.params.slug。不确定是否重要，但我使用的是 Vue 2.0.3。

【解决方案4】：

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

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

HTML：

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

你的组件 JS：

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

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

请注意 HTML 部分中的参数名称差异为 dash-notatinon 和 JS 中的 camelCase。

【讨论】：

不知道你对那个 get_url 的意思，这有点令人困惑，但这个想法是有效的

【解决方案5】：

你可以得到你点击的链接的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>

【讨论】：