Analyse de code du routage secondaire et du routage de troisième niveau dans vue.js

Le contenu de cet article concerne l'analyse du code du routage de deuxième niveau et du routage de troisième niveau dans vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Pourquoi utiliser le routage secondaire et tertiaire ?

Lorsqu'il y a plusieurs dans le projet, le routage hiérarchique doit être utilisé

Si le routage n'est pas hiérarchique et qu'il y a plusieurs , tous ; est défini comme un itinéraire de premier niveau, alors l'affichage du contenu de dans le projet sera déroutant ; ce n'est pas convivial

Si l'itinéraire est classifié, alors lorsqu'un certain deuxième niveau ; ou Lorsque le routage de troisième niveau est utilisé, cette route transmettra le contenu du composant correspondant au dans son composant de routage parent, afin qu'il n'y ait pas de confusion

Lorsque le premier- le routage de niveau est déclenché, naturellement Il recherchera la

route secondaire du composant racine enregistré

pour ajouter un tableau d'attributs enfants à la route de premier niveau et mettre l'itinéraire de deuxième niveau ;

L'attribut path détermine l'affichage de la barre d'adresse url après le saut

//main.js
//一级路由
import About from './components/about/About'


//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'

const router= new VueRouter({
  routes:[
    {path:'/about',name:'about',component:About,children:[
        {path:'/about/contsssssssssssssssact',name:'contactLink',component:Contact},
        {path:'/history',name:'historyLink',component:History},
        {path:'/',name:'deliveryLink',component:Delivery},
        {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide},
      ]},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});

Routage de troisième niveau

et Le routage secondaire est presque le même

const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},
    {path:'/menu',name:'menu',component:Menu},
    {path:'/admin',name:'admin',component:Admin},
    {path:'/about',name:'about',component:About,redirect: {name:'contactLink'},children:[   //二级路由
        {path:'/about/contact',name:'contactLink',component:Contact},
        {path:'/history',name:'historyLink',component:History},
        {path:'/delivery',name:'deliveryLink',component:Delivery},
        {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide,redirect:{name:'phonelink'},children: [  //三级路由
            {path:'/phone',name:'phonelink',component:Phone},
            {path:'/name',name:'namelink',component:Name}
          ]},
      ]},
    {path:'/login',name:'login',component:Login},
    {path:'/register',name:'register',component:Register},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});

Recommandations associées :

Résumé de l'utilisation du routeur Vue.js (avec code)

vue Introduction à la méthode de configuration du routeur en .js

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!