Maison >interface Web >js tutoriel >Comment implémenter le passage des paramètres de route dans vue-router

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

亚连
亚连original
2018-06-15 11:42:321798parcourir

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: &#39;/news/:id&#39;, 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn