Comment utiliser le routage dans 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.

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

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 }
  ]
})

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'
})

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>

5. 显示路由视图

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

<router-view></router-view>

高级用法

动态路由

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

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

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 }
      ]
    }
  ]
})

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) => {
  // ...
})

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