Vue 라우팅에서 매개변수를 전달하는 세 가지 기본 모드(자세한 튜토리얼)

이 글에서는 주로 Vue 라우팅에서 매개변수를 전달하는 세 가지 기본 모드를 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

라우팅은 다양한 페이지를 연결하는 브리지이며 매개변수는 그 안에서 역할을 합니다. 브리지는 어떤 의미에서 두 브리지가 성공적으로 연결될 수 있는지를 결정하는 매우 중요한 역할을 합니다.

Vue 라우팅에서는 3가지 매개변수 전송 방법이 지원됩니다.

시나리오, 상위 구성요소의 li 요소를 클릭하여 하위 구성요소로 이동하고 하위 구성요소가 해당 li 데이터를 얻고 해당하는 올바른 콘텐츠를 표시할 수 있도록 매개변수를 전달합니다.

상위 구성 요소에서:

<li v-for="article in articles" @click="getDescribe(article.id)">

옵션 1:

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
    this.$router.push({
     path: `/describe/${id}`,
    })

// 方案一，需要对应路由配置如下：
  {
   path: '/describe/:id',
   name: 'Describe',
   component: Describe
  }
// 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。

// 在子组件中可以使用来获取传递的参数值。
$route.params.id

옵션 2:

// 父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
    this.$router.push({
     name: 'Describe',
     params: {
      id: id
     }
    })

// 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

//子组件中: 这样来获取参数
$route.params.id

옵션 3:

// 父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
  this.$router.push({
     path: '/describe',
     query: {
      id: id
     }
    })

// 对应路由配置：
  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

// 对应子组件: 这样来获取参数
$route.query.id

// 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~

위 내용은 모두에게 도움이 되기를 바랍니다. 앞으로도 다들.

관련 기사:

element-ui가 vue의 테이블에서 스크롤 로딩 방법을 구현하는 방법에 대해

React 구성 요소 성능 최적화에 대한 자세한 설명

vue를 사용하여 확대 및 축소하면서 이미지를 자르는 방법 , 회전 기능(자세한 튜토리얼)

위 내용은 Vue 라우팅에서 매개변수를 전달하는 세 가지 기본 모드(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!