vue-router에서 경로 매개변수 전달을 구현하는 방법

이 글에서는 Vue-Router 라우팅에서 매개변수를 전달하는 방법을 주로 소개하고 참고용으로 올려드립니다.

경로 전달 매개변수. 뉴스 목록 페이지와 같이 경로에서 매개변수를 전달해야 하는 경우가 많으며, 뉴스 세부정보 페이지에 뉴스 ID를 전달해야 합니다.

1. 뉴스 목록 페이지 템플릿

 <template id="news">
    <p>
      <h2>新闻列表</h2>
      <ul>
        <li>
          <router-link to="/news/001">新闻001</router-link>
        </li>
        <li>
          <router-link to="/news/002">新闻002</router-link>
        </li>
      </ul>      
    </p>
  </template>

/news/001에 접속하여 뉴스 상세 페이지로 이동하면 001의 뉴스가 표시됩니다.

2. 뉴스 상세 페이지 구성 요소 준비

 <template id="NewsDetail">
    <p>
      新闻详细页面
      <span>{{$route.params.id}}</span>
    </p>
  </template>

$route.params.id가 경로에 대한 매개변수를 가져옵니다

3. 경로를 정의하고 경로를 추가합니다

{ path: '/news/:id', component: NewsDetail },

4.

  
  
  
  

 
  

    

      home
      news
    
     
  


  
  

  

  
  

  

  

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

JavaScript에서 프린터를 연결하는 방법

Vue 구성 요소에서 이벤트를 전달하는 방법

Vue 이벤트 수정자 캡처 사용에 대한 자세한 소개

반응에서 페이지 새로 고침 -라우터 404 문제

위 내용은 vue-router에서 경로 매개변수 전달을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!