Exemples pour expliquer comment Vue implémente le routage parent pour accéder aux sous-routes

Dans Vue, nous devons souvent effectuer des opérations de saut de routage. La fonction de routage de Vue est très puissante et prend en charge des fonctions telles que le routage imbriqué et le routage dynamique. Cet article décrira comment passer d'une route parent à une route enfant.

1. Configuration de la sous-route

Tout d'abord, nous devons configurer la sous-route dans la route parent. Dans Vue, vous pouvez utiliser le plug-in Vue Router pour implémenter la gestion et le contrôle du routage. Voici comment la route enfant est configurée :

const routes = [
    {
        path: '/parent',
        component: ParentComponent,
        children: [
            {
                path: 'child',
                component: ChildComponent
            }
        ]
    }
]

Dans le code ci-dessus, nous définissons d'abord une route parent /parent et spécifions son composant comme ParentComponent. Ensuite, une route enfant /parent/child est définie dans le tableau children et son composant est spécifié comme ChildComponent. /parent，并指定了它的组件为ParentComponent。然后在children数组中定义了一个子路由/parent/child，并指定了它的组件为ChildComponent。

2. 路由跳转

在父级路由中，我们可以使用<router-link>标签来跳转到子路由。<router-link>标签会自动处理路由跳转并生成相应的链接。下面是一个简单的例子：

<template>
    <div>
        <h1>Parent Component</h1>
        <router-link to="/parent/child">Go to Child Component</router-link>
        <router-view></router-view>
    </div>
</template>

在上述代码中，我们首先使用<router-link>标签生成了一个链接，链接的路径为/parent/child，这是我们定义的子路由路径。当用户点击这个链接时，会自动跳转到子路由/parent/child。同时，在父级路由中，我们使用<router-view>标签来渲染子路由组件。

3. 带参数的子路由

在实际开发中，我们经常需要在路由中传递参数。Vue Router支持在路由中传递参数，并且还支持通过路由导航对象访问传递的参数。下面是一个带参数的子路由的示例：

const routes = [
    {
        path: '/parent',
        component: ParentComponent,
        children: [
            {
                path: 'child/:id',
                component: ChildComponent
            }
        ]
    }
]

在上述代码中，我们定义了一个带参数的子路由/parent/child/:id，其中:id表示参数名称。在子路由组件中，我们可以通过$route.params访问传递的参数。下面是一个简单的例子：

<template>
    <div>
        <h1>Child Component</h1>
        <p>Id: {{ $route.params.id }}</p>
    </div>
</template>

在上述代码中，我们通过$route.params.id访问传递的参数。当用户访问/parent/child/123时，参数id的值为123。

4. 总结

本文简单介绍了如何在Vue中实现父级路由跳转子路由。通过定义子路由并使用<router-link>

Saut d'itinéraire🎜🎜🎜Dans l'itinéraire parent, nous pouvons utiliser la balise <router-link> pour accéder à l'itinéraire enfant. La balise <router-link> gérera automatiquement les sauts de routage et générera les liens correspondants. Voici un exemple simple : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons d'abord la balise <router-link> pour générer un lien, et le chemin du lien est /parent/ child code>, c'est le chemin de sous-routage que nous avons défini. Lorsque l'utilisateur clique sur ce lien, il passera automatiquement à la route enfant <code>/parent/child. En même temps, dans la route parent, nous utilisons la balise <router-view> pour restituer le composant de la route enfant. 🎜
🎜Sous-routage avec paramètres🎜🎜🎜Dans le développement réel, nous avons souvent besoin de passer des paramètres dans les routes. Vue Router prend en charge la transmission de paramètres dans les itinéraires, ainsi que l'accès aux paramètres transmis via des objets de navigation d'itinéraire. Voici un exemple de sous-route avec paramètres : 🎜rrreee🎜Dans le code ci-dessus, nous définissons une sous-route avec paramètres /parent/child/:id, où :id représente le nom du paramètre. Dans le composant route enfant, nous pouvons accéder aux paramètres transmis via <code>$route.params. Voici un exemple simple : 🎜rrreee🎜Dans le code ci-dessus, nous accédons aux paramètres passés via $route.params.id. Lorsque l'utilisateur accède à /parent/child/123, la valeur du paramètre id est 123. 🎜
🎜Résumé🎜🎜🎜Cet article présente brièvement comment implémenter le routage parent pour passer au routage enfant dans Vue. En définissant des sous-itinéraires et en utilisant la balise <router-link> pour accéder aux itinéraires, nous pouvons facilement implémenter des fonctions de navigation par routage dans les applications Vue. Dans le même temps, Vue Router prend également en charge la transmission de paramètres de routage, ce qui est très pratique et pratique. 🎜

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!