Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-06-15 11:42:32
Original
1731 Leute haben es durchsucht

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>新闻列表</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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

3 die Route, fügen Sie eine Route hinzu

{ path: &#39;/news/:id&#39;, component: NewsDetail },
Nach dem Login kopieren

4. Der vollständige Code lautet wie folgt:




  
  
  
  

 
  

home news

Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!