Vue.js의 URL에서 쿼리 매개 변수를 가져오는 방법

Vue.js의 URL에서 쿼리 매개 변수를 가져오는 방법

Vue.js에서 쿼리 매개 변수를 가져오는 방법

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

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

경로 개체의 문서에 따르면$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() {
  },
....

이 코드 사용

var vm = new Vue({
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.has('yourParam')); // true
    console.log(urlParams.get('yourParam')); // "MyParam"
  },
});

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 3 컴포지션 API

(현재까지 2021년, vue-164년)

import {useRoute} from "vue-router";

//can use only in setup()
useRoute().query.test

또는

//somewhere in your src files
import router from "~/router";

//can use everywhere 
router.currentRoute.value.query.test  

또는

import {useRouter} from "vue-router";

//can use only in setup()
useRouter().currentRoute.value.query.test

URL이 다음과 같은 경우:

somesite.com/something/123

'123'이(가) 'id'(으)라는 매개 변수인 경우(url like /something/:id)로 시도하십시오.

this.$route.params.id

부에루터를 사용하면 된다.아래에 예를 하나 들자면:

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로next기능을 발휘하다vue 인스턴스에 액세스하는 데 있어 권장되는 방법이다.사실 더vm그것은 vue의 예시를 나타낸다.

사용 중인 경우 다음 방법을 참조하십시오.vue-routervue3 composition api와 함께

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.query)
  }
}

해시 모드를 사용하는 경우 이 모드를 사용하지 마십시오.$route.params.name URL 검색 매개 변수만 사용

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

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

예 URL: http://localhost:9528/#/course/outline/143999063887137282

아래 코드 출력:1439990638887137282

this.courseId = this.$route.params.id
console.log('courseId', this.courseId)

참조URL: https://stackoverflow.com/questions/35914069/how-can-i-get-query-parameters-from-a-url-in-vue-js