Codeanalyse des sekundären Routings und des Third-Level-Routings in vue.js

Der Inhalt dieses Artikels befasst sich mit der Codeanalyse des Second-Level-Routings und des Third-Level-Routings in vue.js. Ich hoffe, dass er für Sie hilfreich ist .

Warum sekundäres und tertiäres Routing verwenden?

Wenn es mehrere 975b587bf85a482ea10b0a28848e78a4 gibt, muss hierarchisches Routing verwendet werden.

Wenn das Routing nicht hierarchisch ist und mehrere 975b587bf85a482ea10b0a28848e78a4 vorhanden sind, müssen alle verwendet werden Wenn eine davon als Route der ersten Ebene definiert ist, ist die Inhaltsanzeige von 975b587bf85a482ea10b0a28848e78a4 Zweite Ebene oder Wenn das Routing der dritten Ebene verwendet wird, übergibt diese Route den entsprechenden Komponenteninhalt an die übergeordnete Routing-Komponente, sodass keine Verwirrung entsteht Das Routing der ersten Ebene wird natürlich ausgelöst. Es wird die 975b587bf85a482ea10b0a28848e78a4

sekundäre Route der registrierten Stammkomponente

finden und der Route der ersten Ebene ein untergeordnetes Attributarray hinzufügen , und geben Sie die Route der zweiten Ebene ein;

Das Pfadattribut bestimmt die Anzeige der URL-Adressleiste nach dem Sprung

//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"
});

Third-Level-Routing

und Second-Level-Routing Routing ist fast dasselbe

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"
});

Verwandte Empfehlungen:

Zusammenfassung der Verwendung des Vue.js-Routers ( mit Code)

Router in vue.js Einführung in die Konfigurationsmethode

Das obige ist der detaillierte Inhalt vonCodeanalyse des sekundären Routings und des Third-Level-Routings in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!