라우터를 사용하여 Vue.js에서 매개변수를 전달하는 방법

이번에는 Vue.js에서 라우터를 사용하여 매개변수를 전달하는 방법과 Vue.js에서 라우터를 사용하여 매개변수를 전달할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다. .

Vue-router 매개변수 전달

라우터에 매개변수를 전달해야 하는 이유

시나리오를 상상해 보세요. 현재 홈페이지에서는 항목을 클릭해야 항목의 세부 정보를 볼 수 있습니다. 그러면 이때 홈페이지의 상세페이지에 해당 상품의 ID를 전달해야 하며, 상세페이지에서는 해당 ID를 통해 상세정보를 얻을 수 있습니다.

vue-router 매개변수 전달 방법

Parma 전달 매개변수

게시 코드:

/router/index.vue

export default new Router({
 routes: [
  {
   path: '/',
   name: 'Home',
   component: Home
  },
  {
   path: '/work',
   name: 'Work',
   component: Work
  }
 ]
  })

Component Works는 작업 ID를 Work

/comComponents/Home/컴포넌트에 전달합니다. Comtent/Works.vue

// 触发它传递一个对象到组件Work
getIt (id) {
 this.$router.push({
  path: '/work',
  name: 'Work',
  params: {
   id: id
  }
 })
  }

/comComponents/Work/Index.vue

<template>
  <p class="work">
   work: {{id}}
  </p>
 </template>
 
 <script>
 export default {
  name: 'Work',
  data () {
   return {
    id: this.$route.params.id //拿到id
   }
  }
 }
 </script>

실행 중인 스크린샷:

query 매개변수

위의 파마를 쿼리로 변경합니다. 즉,

// 传入
 this.$router.push({
path: '/work',
name: 'Work',
query: {
 id: id
}
 })
 
 ... ...
 
 this.$route.query.id // 获取

The parmas와 쿼리의 차이점

쿼리는 URL을 통해 매개변수를 전달하고 항상 URL에 표시됩니다

parmas는 매개변수를 전달합니다. 페이지를 새로 고친 후에는 데이터가 없으며 얻은 매개변수를 저장할 수 없습니다.

읽으셨을 것입니다. 이 기사 당신은 사례 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Angular를 사용하여 Font-Awesome을 여는 방법

JS 및 TypeScript를 사용하는 방법

위 내용은 라우터를 사용하여 Vue.js에서 매개변수를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!