Vue.js의 URL에서 쿼리 매개 변수를 얻으려면 어떻게해야합니까?

Vue.js에서 쿼리 매개 변수를 어떻게 가져올 수 있습니까?

예 http://somesite.com?test=yay.

가져올 방법을 찾을 수 없거나 순수한 JS 또는 라이브러리를 사용해야합니까?

route object 의 문서에 따르면 $route구성 요소에서 객체에 액세스하여 필요한 것을 노출시킵니다. 이 경우

//from your component
console.log(this.$route.query.test) // outputs 'yay'

vue-route없이 URL을 분할하십시오

var vm = new Vue({
  ....
  created()
  {
    let uri = window.location.href.split('?');
    if (uri.length == 2)
    {
      let vars = uri[1].split('&');
      let getVars = {};
      let tmp = '';
      vars.forEach(function(v){
        tmp = v.split('=');
        if(tmp.length == 2)
        getVars[tmp[0]] = tmp[1];
      });
      console.log(getVars);
      // do 
    }
  },
  updated(){
  },

다른 솔루션 https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search :

var vm = new Vue({
  ....
  created()
  {
    let uri = window.location.search.substring(1); 
    let params = new URLSearchParams(uri);
    console.log(params.get("var_name"));
  },
  updated(){
  },

VueJS의 초보자를 돕는 자세한 답변 :

• 먼저 라우터 개체를 정의하고 원하는 모드를 선택하십시오. 경로 목록 내에서 경로를 선언 할 수 있습니다.
• 다음으로 메인 앱이 라우터가 있음을 알기를 원하므로 메인 앱 선언 안에 선언하십시오.
• 마지막으로 $ route 인스턴스는 현재 경로에 대한 모든 정보를 보유합니다. 코드는 URL에 전달 된 매개 변수 만 콘솔 로그합니다. (* 마운트는 document.ready와 유사합니다. 즉, 앱이 준비되는 즉시 호출됩니다)

그리고 코드 자체 :

<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});
var vm =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        q = this.$route.query.q
        console.log(q)
    },
});

을 사용하는 다른 방법 vue-router은 쿼리 매개 변수를 라우터의 소품에 매핑하는 것입니다. 그런 다음 컴포넌트 코드의 다른 소품처럼 취급 할 수 있습니다. 예를 들어이 경로를 추가하십시오.

{ 
    path: '/mypage', 
    name: 'mypage', 
    component: MyPage, 
    props: (route) => ({ foo: route.query.foo })  
}

그런 다음 컴포넌트에서 소품을 정상적으로 추가 할 수 있습니다.

props: {
    foo: {
        type: String,
        default: null
    }
},

그런 다음 사용할 수 있으며 this.foo원하는대로 할 수 있습니다 (예 : 감시자 설정 등).

이 날짜 부터 동적 라우팅 문서에 따라 올바른 방법 은 다음과 같습니다.

this.$route.params.yourProperty

대신에

this.$route.query.yourProperty

vue-router를 사용할 수 있습니다. 아래 예가 있습니다.

URL : www.example.com?name=john&lastName=doe

new Vue({
  el: "#app",
  data: {
    name: '',
    lastName: ''
  },
  beforeRouteEnter(to, from, next) {
      if(Object.keys(to.query).length !== 0) { //if the url has query (?query)
        next(vm => {
         vm.name = to.query.name
         vm.lastName = to.query.lastName
       })
    }
    next()
  }
})

참고 : 에서 beforeRouteEnter우리는 같은 구성 요소의 속성에 액세스 할 수없는 기능 : this.propertyName내가 통과 왜 거긴 vm에 nextfunction.It는 VUE는 instance.Actually 액세스에 recommented 방법 vm은 VUE 예를 들어 서

URL이 다음과 같은 경우 :

somesite.com/something/123

'123'은 'id'(/ something / : id와 같은 URL)라는 매개 변수 인 경우 다음을 시도해보십시오.

this.$route.params.id

이 기능을 사용하여 얻을 수 있습니다.

console.log(this.$route.query.test)

서버가 PHP를 사용하는 경우 다음을 수행 할 수 있습니다.

const from = '<?php echo $_GET["from"];?>';

그냥 작동합니다.