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
에 next
function.It는 VUE는 instance.Actually 액세스에 recommented 방법 vm
은 VUE 예를 들어 서
답변
URL이 다음과 같은 경우 :
somesite.com/something/123
‘123’은 ‘id'(/ something / : id와 같은 URL)라는 매개 변수 인 경우 다음을 시도해보십시오.
this.$route.params.id