Maison interface Web Voir.js Comment utiliser le routage dans vue

Comment utiliser le routage dans vue

May 08, 2024 pm 03:03 PM
vue

La fonctionnalité de routage de

Vue permet de gérer la navigation dans les pages de votre SPA, en mappant les chemins d'URL vers les composants de l'application. Les étapes d'utilisation sont les suivantes : Installez la bibliothèque de routage Vue. Créez une instance de routeur. Installez le routeur sur l'instance Vue. Utilisez <router-link> pour définir un lien d'itinéraire. Utilisez <router-view> pour afficher les composants de routage.

Comment utiliser le routage dans vue

Utilisation du routage dans Vue

Introduction au mécanisme de routage de Vue

Le routage dans Vue.js est une fonctionnalité intégrée permettant de gérer la navigation dans les pages dans une application à page unique (SPA). Il permet aux développeurs de créer et de gérer différents chemins d'URL qui correspondent à différents composants ou vues de l'application.

Comment utiliser le routage Vue

1 Installez la bibliothèque de routage Vue

npm install vue-router@next
Copier après la connexion

2 Créez une instance de routeur

Créez une nouvelle instance de Routeur Vue dans votre application Vue.js.

import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})
Copier après la connexion

3. Installez l'instance de routeur dans l'instance Vue

Installez l'instance de routeur dans l'instance Vue.js.

new Vue({
  router,
  el: '#app'
})
Copier après la connexion

4. Définissez les liens de routage

Utilisez la balise <router-link> dans le composant pour définir les liens de routage. <router-link> 标签定义路由链接。

<router-link to="/about">关于我们</router-link>
Copier après la connexion

5. 显示路由视图

在根组件中使用 <router-view> 标签显示当前激活的路由组件。

<router-view></router-view>
Copier après la connexion

高级用法

动态路由

使用冒号 (:) 定义动态路由段,然后在组件中使用 $route.params

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
Copier après la connexion

5. Afficher la vue de routage

Utilisez la balise <router-view> dans le composant racine pour afficher le composant de routage actuellement activé.

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      children: [
        { path: 'users', component: Users },
        { path: 'products', component: Products }
      ]
    }
  ]
})
Copier après la connexion

Utilisation avancée

Routage dynamique

🎜🎜Utilisez deux points (:) pour définir des segments de route dynamiques, puis utilisez $route.params pour y accéder dans le composant. 🎜
router.beforeEach((to, from, next) => {
  // ...
})
Copier après la connexion
🎜🎜Routes imbriquées🎜🎜🎜 Imbibez les routes enfants dans les routes parents pour créer une navigation hiérarchique plus complexe. 🎜rrreee🎜🎜Route Guards🎜🎜🎜Utilisez des gardes de route pour effectuer certaines actions avant ou après une navigation. 🎜rrreee

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 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

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser les graphiques électroniques dans Vue Comment utiliser les graphiques électroniques dans Vue May 09, 2024 pm 04:24 PM

Comment utiliser les graphiques électroniques dans Vue

Le rôle de l'export par défaut dans vue Le rôle de l'export par défaut dans vue May 09, 2024 pm 06:48 PM

Le rôle de l'export par défaut dans vue

Comment utiliser la fonction map dans vue Comment utiliser la fonction map dans vue May 09, 2024 pm 06:54 PM

Comment utiliser la fonction map dans vue

La différence entre event et $event dans vue La différence entre event et $event dans vue May 08, 2024 pm 04:42 PM

La différence entre event et $event dans vue

La différence entre l'exportation et l'exportation par défaut dans vue La différence entre l'exportation et l'exportation par défaut dans vue May 08, 2024 pm 05:27 PM

La différence entre l'exportation et l'exportation par défaut dans vue

Le rôle du monté en vue Le rôle du monté en vue May 09, 2024 pm 02:51 PM

Le rôle du monté en vue

Que sont les crochets en vue Que sont les crochets en vue May 09, 2024 pm 06:33 PM

Que sont les crochets en vue

Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ? Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ? May 09, 2024 pm 02:33 PM

Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ?

See all articles