Maison  >  Article  >  interface Web  >  Comment implémenter des références entre les pages dans uniapp (deux méthodes)

Comment implémenter des références entre les pages dans uniapp (deux méthodes)

PHPz
PHPzoriginal
2023-04-14 15:34:123154parcourir

Dans Uniapp, nous avons souvent besoin de référencer le contenu d'une autre page dans une seule page. Nous introduisons ici deux méthodes pour implémenter des références entre les pages.

Méthode 1 : Utiliser le chemin de la page

Nous pouvons utiliser le chemin de la page pour introduire une autre page, par exemple :

<template>
  <view>
    <other-page></other-page>
  </view>
</template>

<script>
  import OtherPage from '@/pages/other-page/other-page.vue'
  export default {
    components: {
      OtherPage
    }
  }
</script>

Dans l'exemple ci-dessus, nous avons utilisé <other-page>dans la balise template > , puis introduisez le composant vue d'une autre page dans la section script et enregistrez le composant dans les composants. De cette façon, nous pouvons utiliser <other-page> dans cette page pour référencer le contenu d'une autre page. <other-page>标签,然后在script部分引入了另一个页面的vue组件,并且在components中注册了该组件。这样,我们就可以在本页面中使用<other-page>来引用另一个页面的内容。

需要注意的是,这里的路径@/pages/other-page/other-page.vue是相对于项目根目录的,实际路径可能会根据项目结构不同而有所区别。

方法二:使用Page组件的navigateTo方法

另一种方法是使用Page组件的navigateTo方法,例如:

<template>
  <view>
    <button @click="goToOtherPage">跳转到另一个页面</button>
  </view>
</template>

<script>
  export default {
    methods: {
      goToOtherPage() {
        uni.navigateTo({
          url: '/pages/other-page/other-page'
        })
      }
    }
  }
</script>

在上面的例子中,我们在template中使用了一个按钮,然后在script部分编写了goToOtherPage方法,在该方法中使用了uni.navigateTo方法来跳转到另一个页面。需要注意的是,路径'/pages/other-page/other-page'

Il convient de noter que le chemin ici @/pages/other-page/other-page.vue est relatif au répertoire racine du projet. Le chemin réel peut varier en fonction de la structure du projet.

Méthode 2 : utilisez la méthodenavigaTo du composant Page🎜🎜Une autre méthode consiste à utiliser la méthodenavigaTo du composant Page, par exemple : 🎜rrreee🎜Dans l'exemple ci-dessus, nous avons utilisé un bouton dans le modèle, puis nous l'avons écrit dans la section script La méthode goToOtherPage est utilisée et la méthode uni.navigateTo est utilisée dans cette méthode pour passer à une autre page. Il convient de noter que le chemin '/pages/other-page/other-page' doit être renseigné comme chemin de la page réelle et peut également inclure des paramètres, des requêtes et d'autres informations. 🎜🎜Les deux méthodes ci-dessus peuvent introduire le contenu d'une autre page dans Uniapp. La méthode que vous choisissez peut être choisie en fonction de vos propres besoins et de la structure du projet. 🎜

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