Heim > Web-Frontend > js-Tutorial > Codeanalyse des sekundären Routings und des Third-Level-Routings in vue.js

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

不言
Freigeben: 2018-08-23 16:25:16
Original
2130 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 './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"
});
Nach dem Login kopieren

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"
});
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage