Maison > interface Web > Voir.js > Comment utiliser vue-router avec Vue3 ?

Comment utiliser vue-router avec Vue3 ?

王林
Libérer: 2023-05-09 23:10:16
avant
3091 Les gens l'ont consulté

Préface

Le routage de gestion est une fonctionnalité essentielle pour la plupart des applications monopage. Avec la nouvelle version de Vue Router en Alpha, nous pouvons déjà commencer à voir comment cela fonctionne dans la prochaine version de Vue.

De nombreux changements dans Vue3 modifieront légèrement la façon dont nous accédons aux plugins et aux bibliothèques, y compris Vue Router.

1. Première étape : installez vue-router

npm install vue-router@4.0.0-beta.13
Copier après la connexion

2. Deuxième étape : main.js

Comparons d'abord la différence entre main.js dans vue2 et vue3 : (la première image est vue2, la deuxième image pour vue3)

Comment utiliser vue-router avec Vue3 ?

Comment utiliser vue-router avec Vue3 ?

On voit clairement que les objets Vue que nous utilisons couramment dans vue2 "disparaissent" dans vue3 en raison de l'utilisation directe de la méthode createApp, mais en fait l'application créée à l'aide de la méthode createApp Il est un objet Vue. Vue.use(), qui est souvent utilisé dans vue2, peut être remplacé par app.use() pour une utilisation normale dans vue3 dans le fichier main.js de vue3, utilisez vue-router pour utiliser directement app ; La méthode .use () appelle simplement le routeur.

Remarque : Le nom de la route exportée par le fichier de routage d'importation provient du "chemin relatif du fichier de routage correspondant". Le répertoire du projet est le suivant (vue2 et vue3 sont identiques) :

Comment utiliser vue-router avec Vue3 ?

3. Fichier de routage

import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    {
        path: '/',
        component: () => import('@/pages')             
    },
    {
        path: '/test1',
        name: "test1",
        component: () => import('@/pages/test1')   
    },
    {
        path: '/test2',
        name: "test2",
        component: () => import('@/pages/test2')   
    },
]
export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router
Copier après la connexion

4. app.vue

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: &#39;App&#39;,
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copier après la connexion

4. Utilisation (comme jump)

Nous introduisons useRoute et useRouter là où le routage est nécessaire (équivalent à $route et $router dans vue2)

<script>
import { useRoute, useRouter } from &#39;vue-router&#39;
export default {
  setup () {
    const route = useRoute()
    const router = useRouter()
    return {}
  },
}</script>
Copier après la connexion

Exemple : saut de page

<template>
  <h2>我是test1</h2>
  <button>toTest2</button>
</template>
<script>
import { useRouter } from &#39;vue-router&#39;
export default {
  setup () {
    const router = useRouter()
    const toTest2= (() => {
      router.push("./test2")
    })
    return {
      toTest2
    }
  },
}
</script>
<style>
</style>
Copier après la connexion

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:yisu.com
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