URL 매개 변수를 Vuejs에 전달하는 방법

URL 매개 변수를 Vuejs에 전달하는 방법

저는 라벨과 VueJs로 앱을 구축하고 있는데, 사용자 슬러그나 사용자 ID와 같은 URL 매개 변수를 적절한 방식으로 vuejs에 전달하여 해당 매개 변수를 에이잭스 요청에 사용할 수 있는 방법이 궁금합니다.

예를 들어 다음 링크를 클릭한 경우

domain.com/user/john-appleseed

저는 슬러그 'john-apple seed'를 매개 변수로 제 vuejs 애플리케이션 내에서 아약스 요청을 하고 싶습니다.

이를 위한 "올바른/적절한" 방법은 무엇입니까?

잘 부탁드립니다!

vue-incipal은 아마 여기에 도움이 될 것입니다.경로를 다음과 같이 정의할 수 있습니다.

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

사용자 내Profile구성요소, 요청된 사용자의 슬러그는 다음과 같이 사용할 수 있습니다.this.$route.params.slug

자세한 내용은 공식 문서를 참조하십시오. http://router.vuejs.org/en/

당신이 부품을 만들고 있다고 생각합니다.예를 들어, 해당 구성 요소 안에 버튼이 있고 이 버튼을 클릭하면 작업(AJAX 요청 또는 리디렉션)을 수행할 수 있습니다.

이 경우 URL을 구성 요소에 매개 변수로 전달하고 내부에서 사용할 수 있습니다.

HTML:

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

구성 요소 JS:

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

그런 다음 구성 요소의 매개 변수에 액세스할 수 있습니다.this.loginUrl.

HTML 파트에서 dash-notaton으로 파라미터 이름이 다르고 JS에서 camelCase로 파라미터 이름이 다르다는 것을 알아두시기 바랍니다.

vue-router를 사용하는 경우 쿼리 매개 변수를 캡처하여 소품에 전달하려는 경우 이 방법을 사용할 수 있습니다.

호출 중인 URL: http://localhost:8080/#/?prop1=test1&prop2=test2

My Component.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
      })
    }
  ]
})

클릭한 링크의 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>

값의 $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 : https://stackoverflow.com/questions/32560184/how-to-pass-url-parameters-to-vuejs