Vue 동적 라우팅은 무엇을 의미합니까?

Vue에서 동적 라우팅은 특정 패턴과 일치하는 경로를 동일한 구성 요소에 매핑하는 것입니다. 동적 라우팅의 본질은 "params" 및 "query" 매개 변수의 두 가지 방법으로 전달될 수 있다는 것입니다.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue 동적 라우팅의 의미

동적 라우팅에 대한 이해

동적 라우팅은 특정 패턴과 일치하는 경로를 동일한 구성 요소에 매핑하는 것입니다. 실제로 핵심은 URL을 통해 매개변수를 전달하는 것입니다

예: 상품의 구성요소로서 이 구성요소에 다양한 제품 ID를 매핑해야 합니다. 이때 동적 라우팅을 사용해야 합니다.

동적 라우팅 구성

동적 매개변수를 두 가지 방법으로 전달할 수 있습니다:
(1), params
(2), query

참고: 다음 코드 데모는 모두 기록 라우팅 모드에 있습니다

매개변수 전달 매개변수 모드

라우팅 구성 방법: 콜론 사용: 동적 매개변수 바인딩.

//index.js中配置路由信息
const routes = [{
    path: '/goods/:id',
    component: Goods}]

라우팅 점프는 다음과 같이 나누어집니다.

(1) 라우터 링크 방식을 사용하여 루트 점프 구현
이 방식에서는 다음과 같이 문자열을 사용하고 경로 바로 뒤에 해당 값을 따라갈 수 있습니다.

둘째, 다음과 같은 개체 메서드를 사용할 수 있습니다.

참고:

• params 메서드에서 to 속성은 개체 메서드를 사용하며 경로는 name 속성으로 도입되어야 하며 path는 사용할 수 없습니다. 사용됩니다.
• params 메소드에 매개변수를 전달할 때 속성 이름은 라우팅 구성 시 동적 매개변수 이름과 일치해야 합니다. 그렇지 않으면 오류가 보고됩니다.
  (2) $router를 사용하여 경로를 점프합니다.

//方法1
 this.$router.push('/goods/' + this.goodsId)
 //方法2
 this.$router.push({
   name: 'goods',
   params: {
     id: this.goodsId   }})

params 방법, 매개변수 전달 후 해당 URL 주소는 다음과 같습니다.

매개변수를 얻는 방법:
$router.params, 예를 들어 이 예에서 id 값, 해당 코드는 다음과 같습니다.

$route.params.id

쿼리 모드에서 매개변수 전달

경로를 구성할 때 정상적으로 구성하면 됩니다. 즉, 이전에 경로를 구성한 방식대로 지금도 구성할 수 있습니다. . 예:

const routes = [{
    path: '/goods',
    name: 'goods',
    component: Goods}]

라우팅 점프 시 다음과 같이 나뉩니다.
(1) 라우터 링크 방법을 사용하여 루트 점프 구현
쿼리 매개변수는 문자열이 아닌 개체를 통해서만 전달할 수 있습니다.

<router-link>商品</router-link>

(2), $를 사용합니다. 경로 점프를 위한 라우터 메소드

this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })

this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })

매개변수 전달을 위한 쿼리 메소드, 매개변수 전달 후 해당 URL 주소는 다음과 같이 표시됩니다.

참고: 매개변수 전달을 위한 쿼리 메소드, 쿼리 객체의 속성 이름(예: 이 예에서는 ID )는 제한적으로 params를 통해 매개변수를 전달할 때와 달리 임의로 이름을 지정할 수 있습니다.
동시에 경로 속성이나 이름 속성을 사용하여 이러한 방식으로 경로를 도입할 수 있습니다.
매개변수를 가져오는 방법:
$route.query 예를 들어 이 예에서 id 값을 가져오려면 코드는 다음과 같습니다.

$route.query.id

간단히 말해서
(1)에 주의하세요. 매개변수 라우팅은 이름과 경로를 통해서만 도입할 수 있습니다.
(2) 경로를 이동하려면 "라우터"를 사용하고 매개변수를 얻으려면 "경로"를 사용하세요

[관련 권장사항: "vue.js tutorial"]

위 내용은 Vue 동적 라우팅은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!