집 > 기사 > 웹 프론트엔드 > vue+query 전달 매개변수에 대한 자세한 설명

vue+query 전달 매개변수에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-18 09:38:522728검색

이번에는 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: &#39;/B&#39;,params:{name:&#39;zs&#39;,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: &#39;/B&#39;,query:{name:&#39;张飞&#39;,age:22}}">跳转B组件</router-link>

점프 후 브라우저 주소는 다음과 같습니다: http://localhost:8080/#/B?name=zzz&age=22

이것과 같습니다.$router.push(...)

 <router-link :to="{path:&#39;/B/123&#39;}">
    跳转B组件</router-link>
  </p>

{
   path: '/B/:name',
   name: 'B',
   component: require('../components/B')
  }

Value

this.$route.params.name

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!