Làm thế nào để chuyển các tham số url tới Vuejs

Question

Tôi đang xây dựng một ứng dụng với laravel và VueJs và tôi đã tự hỏi cách chuyển một tham số url như slug người dùng hoặc id người dùng tới vuejs theo cách thích hợp để có thể sử dụng tham số để thực hiện yêu cầu ajax?

Ví dụ khi ai đó nhấp vào một liên kết dẫn đến

domain.com/user/john-appleseed 

Tôi muốn làm một yêu cầu ajax trong ứng dụng vuejs tôi với sên 'john-Appleseed' như một tham số.

Cách "đúng/phù hợp" cho điều này là gì?

Cảm ơn trước!

Answer 1

Bạn có thể nhận được url của liên kết bạn nhấp vào và sau đó sử dụng url này để thực hiện yêu cầu ajax của bạn.

methods: { 
    load: function(elem, e) { 
     e.preventDefault(); 
     var url = e.target.href; 
     this.$http.get(url, function (data, status, request) { 
      // update your vue 
     }); 
    }, 
}, 

Và trong mẫu cuộc gọi của bạn phương pháp này khi nhấp chuột người dùng trên một liên kết:

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

Answer 2

Tôi cho rằng bạn đang xây dựng một thành phần. Giả sử, bạn có một nút bên trong thành phần đó và khi được nhấp, bạn muốn thực hiện một hành động (yêu cầu AJAX hoặc chỉ chuyển hướng).

Trong trường hợp này, bạn chuyển URL làm thông số cho thành phần và bạn có thể sử dụng nó bên trong.

HTML:

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

JS thành phần của bạn:

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

Sau đó, bạn có thể truy cập vào param trong thành phần như this.loginUrl.

Hãy lưu ý rằng sự khác biệt tên param trong phần HTML dưới dạng dash-notatinon và trong JS là camelCase.

Answer 3

vue-router có thể sẽ giúp ích ở đây. Nó cho phép bạn xác định các tuyến đường của bạn như vậy:

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

Trong thành phần Profile của bạn, sên của người dùng yêu cầu sau đó sẽ trở nên có sẵn dưới this.$route.params.slug

Kiểm tra các tài liệu chính thức để biết chi tiết: http://router.vuejs.org/en/

Answer 4

Nếu bạn là bằng cách sử dụng vue-router và muốn nắm bắt các tham số truy vấn và chuyển chúng vào các đạo cụ, bạn có thể làm theo cách này.

Url được gọi là: 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

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