집 > 기사 > 웹 프론트엔드 > vue를 사용하여 라우터에 참여하는 방법

vue를 사용하여 라우터에 참여하는 방법

php中世界最好的语言원래의: 2018-05-28 11:05:511577검색

이번에는 Vue pass 라우터 사용법과 Vue pass 라우터 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

vue 매개변수 전달 방법 one

1, 라우팅 구성

 {
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
 }

2, 사용 방법

// 直接调用$router.push 实现携带参数的跳转
 this.$router.push({
// 这个id是一个变量,随便是什么值都可以
 path: /describe/${id}`,
 })

3, 획득 방법(설명 페이지에서)

$route.params.id

위 방법을 사용하여 이전 페이지를 가져와서 통과합니다. id 값

vue 매개변수 전달 방법 2

1. 라우팅 구성

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
（这个地方默认配置就可以了，不用做任何的处理）

2. 사용 방법

  this.$router.push({
   name: 'Describe',
   params: {
   id: id
   }
  })

상위 컴포넌트에서: 라우팅 속성의 이름을 통해 일치하는 경로를 결정하고 전달합니다. params 매개변수를 통해 이를 수행합니다.

3. 획득 방법(설명 페이지)

$route.params.id

은 params를 사용하여 얻을 수도 있습니다.

vue 매개변수 전달 방법 3

1. 라우팅 구성

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }

(기본 구성)

2. 사용법

 this.$router.push({
   path: '/describe',
   query: {
   id: id
   }
  })
（params换成了query）

3. 획득 방법(설명 페이지에서)

$route.query.id

(여기서 쿼리는 id도 가져오는 데 사용됩니다. 이전에 얻은 매개변수와의 차이점은 쿼리로 얻은 id 값이 다음과 같이 표시된다는 점입니다. 전달한 값을 확인할 수 있습니다.)

props 값 전달 방법

부모 구성 요소

(테이블 데이터의 이름은 특정 값이 아닌 임의로 지정할 수 있음)

<p class="content">
//这个是一个普通组件，其中tabelData可以是变量，也可以是常量，和pageInfo一样样，这里打算传递两个值过去，其实也可以用对象的方式传过去都是可以的。
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</p>

자식 구성 요소

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

prop 단방향 바인딩이므로 하위 구성 요소 내에서 소품을 변경하면 안 됩니다. 그러나 여기에서 props가 전달한 값은 상위 구성 요소의 값이 변경됨에 따라 변경되며, 이는 동적 변경입니다.

$route

1, $route.path

사용 팁: string

string, 현재 경로의 경로에 해당, 항상 "/와 같은 절대 경로로 해석됨" foo/bar ".

2, $route.params

Type: Object

　 동적 조각과 전체 일치 조각을 포함한 키/값 개체입니다. 라우팅 매개변수가 없으면 빈 개체입니다.

3, $route.query

Type: Object

URL 쿼리 매개변수를 나타내는 키/값 개체입니다. 예를 들어 /foo?user=1 경로의 경우 $route.query.user == 1이거나 쿼리 매개변수가 없는 경우 빈 객체입니다.

4, $route.hash

Type: string

현재 경로의 해시 값(# 포함), 해시 값이 없으면 빈 문자열입니다.

5, $route.fullPath

Type: string

쿼리 매개변수 및 해시의 전체 경로를 포함한 구문 분석 완료 후의 URL입니다.

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