Une brève analyse du routage dynamique et des vues nommées dans Vue.js

Le contenu de cet article concerne une brève analyse du routage dynamique et des vues nommées de Vue.js. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer.

Routage dynamique
Le routage dynamique peut en fait être appelé paramètres de routage.

const router = new VueRouter({
  routes: [    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

Un chemin sous la forme ci-dessus est une route dynamique. Après les deux points se trouvent les paramètres, qui peuvent être suivis par plusieurs paramètres. Chaque paramètre est défini sur this.$route.params.

Notez que /user/:id et /user/:name, lorsque les paramètres changent, le composant sera réutilisé, donc le hook de cycle de vie du composant ne sera plus appelé. Lors de la réutilisation de composants, vous pouvez surveiller si l'itinéraire change en surveillant les modifications dans l'objet $route.

Le hook de routage avantRouterUpdate sera également exécuté.

vue-router utilise path-to-regexp comme moteur de correspondance de chemin si le chemin est complexe, il peut apprendre des modèles de correspondance avancés. Cependant, le chemin ne doit généralement pas être conçu pour être trop complexe. S'il est trop complexe, vous devez réfléchir à la façon de le simplifier

Vues nommées

Parfois, vous le souhaitez. pour afficher plusieurs vues en même temps (frère) Par exemple, créez une mise en page avec deux vues : barre latérale (navigation latérale) et principale (contenu principal). À ce stade, nommer la vue est pratique. Au lieu d'avoir une seule prise, vous pouvez avoir plusieurs vues nommées individuellement dans votre interface. Si router-view ne définit pas de nom, la valeur par défaut est la valeur par défaut.

<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="header"></router-view>

Une vue est rendue à l'aide d'un seul composant, donc pour le même itinéraire, plusieurs vues nécessitent plusieurs composants. Assurez-vous d'utiliser correctement la configuration des composants (avec s) : Routage dynamique et vues nommées

routes: [
    {
      path: '/',
      components: {        default: Foo,
        a: SideBar,
        b: Header
      }
    }
  ]

Vues nommées dans la vue

routage vue-router Une brève introduction aux bases

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!