So implementieren Sie die Übergabe von Routenparametern im Vue-Router

In diesem Artikel wird hauptsächlich die Methode zur Übergabe von Parametern beim Vue-Router-Routing vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Route übergibt Parameter. Oftmals müssen wir Parameter auf der Route übergeben, z. B. auf der Seite mit der Nachrichtenliste, und wir müssen die Nachrichten-ID an die Seite mit den Nachrichtendetails übergeben.

1. Vorlage für eine Nachrichtenliste

 <template id="news">
    <p>
      <h2 id="新闻列表">新闻列表</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>

Wir besuchen /news/001, springen zur Nachrichtendetailseite und zeigen die Nachrichten von 001 an.

2. Vorbereitung der Nachrichtendetailseite

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

$route.params.id ruft die Parameter auf der Route ab

3 die Route, fügen Sie eine Route hinzu

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

4. Der vollständige Code lautet wie folgt:

  
  
  
  

 
  

    

      home
      news
    
     
  


  
  

  

  
  

  

  

Das Obige habe ich für alle zusammengestellt wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So verbinden Sie den Drucker in JavaScript

So übergeben Sie Ereignisse in der Vue-Komponente

Detaillierte Einführung in die Verwendung der Vue-Ereignismodifikatorerfassung

404-Problem tritt auf, wenn die Seite im React-Router aktualisiert wird

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Übergabe von Routenparametern im Vue-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!