首頁 >web前端 >js教程 >vue.js中二級路由與三級路由的程式碼解析

vue.js中二級路由與三級路由的程式碼解析

不言原創: 2018-08-23 16:25:162144瀏覽

這篇文章帶給大家的內容是關於vue.js中二級路由和三級路由的程式碼解析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

為什麼要用二級和三級路由？

當專案中有多個975b587bf85a482ea10b0a28848e78a4 時，就必須使用分級路由；

如果路由不分級，又有多個975b587bf85a482ea10b0a28848e78a4 ,全部都是定義為一級路由，那麼專案中的 975b587bf85a482ea10b0a28848e78a4 的內容顯示就會混亂；這是不友善的；

如果對路由進行分級，那麼當觸發某個二級或三級路由時，此路由就會將對應元件內容傳給自己的父級路由元件裡面的975b587bf85a482ea10b0a28848e78a4，這樣就不會混亂；

一級路由被觸發時，自然會找自己所註冊的根元件的975b587bf85a482ea10b0a28848e78a4

二級路由

為一級路由新增一個children 屬性數組，並將二級路由放入；

path 屬性決定跳轉後url 網址列的顯示

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

三級路由

與二級路由差不多

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

vue.js中二級路由與三級路由的程式碼解析

二級路由

三級路由

相關文章