이번에는 vue+query에서 매개변수를 전달하는 단계에 대해 자세히 설명하겠습니다. vue+query에서 매개변수를 전달하는 주의사항은 무엇인가요?
저는 최근 Vue를 배우고 있습니다. 이 글에서는 Vue 매개변수와 쿼리 매개변수의 사용법을 소개합니다. 모두와 공유하고 메모를 남겨주세요
선언적:
프로그래밍: router.push(...)
두 방법 모두 이전 기사에 이어 구성 요소 A를 통해 구성 요소 B로의 점프 링크를 구현하고 매개 변수를 전달할 수 있습니다.
1. router.push를 사용하세요
라우터/index.js
export default new Router({ routes: [ { path: '/', name: 'A', component: require('../components/A') }, { path: '/B/:name/:age', name: 'B', component: require('../components/B') } ] })
위에서 routing의 구성요소 B에 두 개의 매개변수 name과 age를 추가합니다. 구성 요소, @click
이벤트 바인딩, B 구성 요소로 이동하여 params<template>
<p> <!---只允许有一个最外层标签 !-->
<p>
<p>{{message}}</p>
<p @click="toBFun">跳转B组件啊啊</p>
<!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳转B组件啊啊</router-link>-->
</p>
</p>
</template>
<script>
export default {
data: function () {
return {
message: 'vue好帅啊!'
}
},
methods: {
toBFun: function(){
this.$router.push({name:'B',params:{name:'xy',age:22}});
}
}
}
</script>
<style>
</style>
를 사용하여 매개 변수 전달
이때 브라우저에는 http://localhost:8080/#/B/xy/22
가 표시됩니다. 쿼리
값 이전및 주소 변경을 살펴보세요. 또한 router/index.js 라우팅 파일에는 변경되지 않은 두 개의 매개변수 이름인 age
{ path: '/B/:name/:age', name: 'B', component: require('../components/B') }
가 있습니다. 구성요소 A에서는 이전에 매개변수가 매개변수를 통해 전달되었습니다.
this.$router.push({name:'B',params:{name:'xy',age:22}});
교체 후 문의
this.$router.push({name:'B',query:{name:'xy',age:22}});
이때 브라우저는 다음을 찾습니다: http://localhost:8080/#/?name=xy&age=22
위의 두 가지 방법을 통해 페이지를 새로 고친 후에도 매개변수가 유지됩니다.
값을 얻는 방법은 약간 다릅니다.
params: this.$route.params.name;
쿼리:this.$route.query.name;
-------------------------- 또 다른 방법이 있습니다 ------- ------- ----------
라우터 링크를 사용하세요
<router-link :to="{ path: '/B',query:{name:'张飞',age:22}}">跳转B组件</router-link>
점프 후 브라우저 주소는 다음과 같습니다: http://localhost:8080/#/B?name=zzz&age=22
이것과 같습니다.$router.push(...)
<router-link :to="{path:'/B/123'}"> 跳转B组件</router-link> </p>
{ path: '/B/:name', name: 'B', component: require('../components/B') }
Value
this.$route.params.name
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 vue+query 전달 매개변수에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!