Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-15 11:42:32
original
1752 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

$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 },
Copier après la connexion

4. L'ensemble du code est le suivant :




  
  
  
  

 
  

home news

Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal