Comment utiliser Vue Router pour le saut de routage dans Uniapp

Comment utiliser Vue Router pour le saut d'itinéraire dans uniapp

L'utilisation de Vue Router pour le saut d'itinéraire dans uniapp est une opération très courante Cet article présentera en détail comment utiliser Vue Router dans le projet uniapp et fournira des exemples de code spécifiques.

1. Installer Vue Router
Avant d'utiliser Vue Router, nous devons d'abord l'installer. Ouvrez la ligne de commande, accédez au répertoire racine du projet uniapp, puis exécutez la commande suivante pour installer Vue Router :

npm install vue-router

2. Créez un fichier de configuration de routage
Créez un fichier nommé router.js dans le répertoire racine du projet Fichier utilisé pour configurer le routage. Le code spécifique est le suivant :

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/Home'
import About from '@/pages/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Dans le code ci-dessus, nous avons d'abord importé Vue et Router, et avons dit à Vue que nous utiliserions Router via la méthode Vue.use(). Ensuite, nous avons défini un objet de routage, qui contient deux routes, correspondant à la page d'accueil et à la page à propos. Parmi eux, path représente le chemin de routage, name représente le nom du routage et composant représente le composant correspondant au routage.

3. Monter le routage dans App.vue
Dans le fichier App.vue, nous devons introduire le fichier de configuration de routage créé et le monter dans uniapp. Le code spécifique est le suivant :

<template>
  <view class="container">
    <router-view/>
  </view>
</template>

<script>
  import router from '../router'

  export default {
    created() {
      uni.$app.$mount(this.$el) // 挂载路由
    },
    router
  }
</script>

Dans le code ci-dessus, nous avons d'abord ajouté un composant de vue 99ae171a883fff6fa2f384572360bc0a dans la balise du modèle pour afficher les composants correspondant aux différentes routes. Ensuite, le fichier de configuration de routage créé précédemment est introduit dans la balise de script et monté dans uniapp via l'attribut router. 99ae171a883fff6fa2f384572360bc0a，用于展示不同路由对应的组件。然后，在script标签中引入了之前创建的路由配置文件，并将其通过router属性挂载到uniapp中。

四、路由跳转
现在，我们可以通过在组件中使用b988a8fd72e5e0e42afffd18f951b277组件来实现页面的跳转。具体代码如下：

<template>
  <view>
    <router-link to="/home">跳转到主页</router-link>
    <router-link to="/about">跳转到关于页面</router-link>
  </view>
</template>

<script>
  export default {
    //
  }
</script>

在上面的代码中，我们使用b988a8fd72e5e0e42afffd18f951b277组件来创建两个跳转链接，分别对应着主页和关于页面。to属性用于指定要跳转的路径。

同样地，我们也可以通过在组件的methods中使用this.$router.push()方法来实现路由跳转。具体代码如下：

<script>
  export default {
    methods: {
      goHome() {
        this.$router.push('/home')
      },
      goAbout() {
        this.$router.push('/about')
      }
    }
  }
</script>

在上面的代码中，我们分别在goHome和goAbout方法中使用this.$router.push()方法来跳转到主页和关于页面。参数为要跳转的路径。

总结
通过以上步骤，我们就可以在uniapp项目中成功使用Vue Router进行路由跳转了。通过b988a8fd72e5e0e42afffd18f951b277组件或者this.$router.push()

4. Saut d'itinéraire🎜Maintenant, nous pouvons accéder à la page en utilisant le composant b988a8fd72e5e0e42afffd18f951b277 dans le composant. Le code spécifique est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons le composant b988a8fd72e5e0e42afffd18f951b277 pour créer deux liens de saut, correspondant respectivement à la page d'accueil et à la page à propos. L'attribut to est utilisé pour spécifier le chemin vers lequel accéder. 🎜🎜De même, nous pouvons également implémenter le saut de route en utilisant la méthode this.$router.push() dans les méthodes du composant. Le code spécifique est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode this.$router.push() dans les méthodes goHome et goAbout pour accéder respectivement à la page d'accueil et à la page à propos. Le paramètre est le chemin vers lequel accéder. 🎜🎜Résumé🎜Grâce aux étapes ci-dessus, nous pouvons utiliser avec succès Vue Router pour effectuer des sauts de routage dans le projet uniapp. Grâce au composant b988a8fd72e5e0e42afffd18f951b277 ou à la méthode this.$router.push(), nous pouvons facilement sauter et naviguer entre les pages. J'espère que cet article pourra aider tout le monde à comprendre l'utilisation de Vue Router pour le routage des sauts dans Uniapp. 🎜

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!