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

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

不言

Freigeben： 2018-08-23 16:25:16

Original

2120 Leute haben es durchsucht

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 gibt, muss hierarchisches Routing verwendet werden.

Wenn das Routing nicht hierarchisch ist und mehrere vorhanden sind, müssen alle verwendet werden Wenn eine davon als Route der ersten Ebene definiert ist, ist die Inhaltsanzeige von 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

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 &#39;./components/about/About&#39;


//二级路由
import Contact from &#39;./components/about/Contact&#39;
import Delivery from &#39;./components/about/Delivery&#39;
import History from &#39;./components/about/History&#39;
import OrderingGuide from &#39;./components/about/OrderingGuide&#39;

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

Nach dem Login kopieren

Third-Level-Routing

und Second-Level-Routing Routing ist fast dasselbe

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

Nach dem Login kopieren