Autres opérations pour le routage Vue.js

Cette fois, je vais vous présenter d'autres opérations de routage Vue.js Quelles sont les précautions pour les autres opérations d'utilisation du routage Vue.js. Jetons un coup d'oeil une fois.

En fonction du chemin actuel, accédez à Apple

   <router-link to="apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

Si vous souhaitez accéder au répertoire racine, ajoutez /

   <router-link to="/apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

devant Apple si lié, nous pouvons également modifier le chemin dynamiquement

<template>
  <div id="app">
    <router-link :to="path">to apple</router-link>
    ......  </div></template><script>
  export default {
    data () {      return {        path: &#39;apple&#39;
      }
    }
  }</script>

Si nous le lions et ne voulons pas modifier le chemin dynamiquement, nous pouvons également l'écrire directement,

Remarque : Apple doit être placé entre guillemets simples. Sinon, il ira dans les données pour rechercher Apple et signalera une erreur indiquant que l'

objet est introuvable

<router-link :to="&#39;apple&#39;">to apple</router-link>

. le paramètre

<router-link :to="{path:&#39;banana&#39;,param:{color:&#39;yellow&#39;}}">to banana</router-link>

via la balise et le lien Devenez une balise li, bien sûr, vous pouvez également le définir sur d'autres balises

<router-link :to="&#39;apple&#39;" tag="li">to apple</router-link>

* Les éléments ci-dessus sont tous déclaratifs

navigation Expérimentons la navigation programmatique
via push , accédez à une page spécifique

router.push('apple')
或者
router.push({path: 'apple'})
或者name
......

Scénario d'application :

Chaque fois que nous changeons d'itinéraire, définissez certaines opérations pour lui

Par exemple : vérifiez l'état de connexion de l'utilisateur, si l'utilisateur n'est pas connecté, accédez à l'interface de connexion via la navigation par programmation

routeur.
avantEach(router.push('interface de connexion '))

Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Attributs des balises Vue et rendu conditionnel de Vue.js

Rendu de liste v de Vue.js -pour le sous-composant d'objet tableau

Quelles sont les précautions d'utilisation de Vue.js

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!