Comment implémenter le passage des paramètres de route dans vue-router

Cet article présente principalement la méthode de transmission des paramètres dans le routage vue-router. Maintenant, je le partage avec vous et le donne comme référence.

Paramètres de transmission de l'itinéraire. Plusieurs fois, nous devons transmettre des paramètres sur l'itinéraire, tels que la page de liste d'actualités, nous devons transmettre l'ID d'actualité à la page de détails de l'actualité.

1. Modèle de page de liste d'actualités

 <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>

Nous visitons /news/001, passons à la page de détails de l'actualité et affichons les actualités de 001.

2. Préparation des composants de la page de détail des actualités

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

$route.params.id récupère les paramètres de l'itinéraire

3 . Définissez l'itinéraire et ajoutez un itinéraire

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

4. L'ensemble du code est le suivant :

  
  
  
  


 
  

    

      home
      news
    
     
  


  
  

  

  
  

  

  

Ce qui précède est ce que j'ai compilé. pour tout le monde. J’espère que cela sera utile à l’avenir.

Articles associés :

Comment connecter l'imprimante en javaScript

Comment passer des événements dans le composant vue

Introduction détaillée à l'utilisation de la capture du modificateur d'événement Vue

Un problème 404 se produit lors de l'actualisation de la page dans React-Router

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!