Vue admin工作整理(三) 路由

2022-05-06 01:30:08 字數 2683 閱讀 3964

1、router-link和router-view元件

router-link元件實際上是封裝了乙個a標籤(鏈結標籤),裡面有乙個重要屬性:「to」,它的值是乙個路徑,其路徑對應的渲染元件,要在路由列表(router->router.js)裡定義,該路由列表為乙個陣列形式存放不同的路由物件,乙個基本的路由物件,必須包含兩個屬性:path、component;path為對應的路徑(在url輸入的路徑),component為對應path路徑要渲染的元件

router-view元件是乙個檢視渲染元件,通過router-link實現跳轉的元件,其載入動作都需要通過router-view來渲染

2、路由配置

通過路由url中傳遞不同的引數給同一元件,達到呈現不同內容的目的:

路由列表中新增乙個動態路由定義:

views中增加對應的argu.vue元件:

}

備註:

}可以直接獲取到路由列表中定義的:name值,$route表示獲取當前路由物件
run後執行的效果為:

顧名思義元件套元件呈現,實現思路為:路由列表定義乙個父元件:parent,然後在父元件下定義子元件:child,強調:在parent.vue中必須要增加檢視渲染元件(router-view)才能使子元件渲染出來,具體實現步驟:

路由列表增加巢狀關係的元件:

]

}

views中增加對應的parent.vue、child.vue元件:

parent.vue:

i am parent !!!

child.vue:

i am child !!!

run後執行的效果為:

通過給路由物件增加name屬性,其他元件通過name來讀取該物件的方法,比如 home和about路由物件增加name屬性:

,

about

備註::to是v-bind:to的縮寫兩個等同

如果想在同乙個頁面上顯示多個檢視,而且讓每乙個檢視顯示指定的位置,實現思路:

about

路由列表中增加命名路由定義【只是由傳統的路由物件的component調整為複式的components】,如果1步驟沒有命名,則在2步驟中預設的路由物件為default:

}

views中增加對應的元件

email.vue:

email: [email protected]

tel.vue:

tel: 18888888888

run後的結果呈現:

3、重定向和別名

重定向:把當前要訪問的url 重定向到另乙個url上,實現思路:在路由列表中增加元件物件:

備註:實現的內容就是當訪問main這個url的時候,自動重定向到/(首頁),也可以通過命名路由的方式來訪問

}

也可以通過方法的方式來實現:

}

}

2.   別名:我們在訪問乙個路徑的時候,可以給它定義乙個其他的名字,效果一樣都是訪問同乙個頁面,別名的關鍵字用的是:alias 用法跟name一樣, 注意別名前面要有反斜槓:

4、history模式

路由例項中初始化的時候預設是有乙個mode方法的,該方法值是hash,就是我們看到的在url中存在的#號字元位址,如果我們想在url中將這種預設的方法剔除掉,可以重新對方法賦值:history,路由例項調整為:

import vue from 'vue'import router from 'vue-router'import routes from './router'vue.use(router)

export

default

newrouter()

然後在路由列表中,增加方法來實現檢索不到的位址,則所有非定義的url都跳轉到指定元件中去,這裡有乙個知識點就是路由列表是由上到下來讀取的,路由物件間存在讀取順序關係

5、程式設計式的導航【重點】,通過js來控制頁面的跳轉、返回等動作

也可以通過引數來實現處理,使得邏輯更加縝密:

跳轉到parent頁面

還可以使用命名的方式跳轉到parent上:

跳轉到parent頁面

6、路由元件傳參:如果在乙個頁面中,需要根據路由去獲得引數,去對頁面進行一些邏輯處理,首先可以通過this.$router來獲取路由例項的引數,這樣頁面元件和路由就進行了耦合,為了進行分離,更大程度復用,我們推出了路由元件傳參的實現方案:

}    

}

)

}

props:

ant design pro (三)路由和選單

路由和選單是組織起乙個應用的關鍵骨架,我們的腳手架提供了一些基本的工具及模板,幫助你更方便的搭建自己的路由 選單。注意 我們的腳手架依賴dva 2,路由方面是基於react router 4的實現,在寫法以及 api 上與之前的版本有較大不同,所以,在開始前你需要具備一些相關的基礎知識。這裡給出幾篇...

MVC框架的封裝(三)路由類

在此提示,此篇部落格是接著前兩篇寫的直接看有可能看不懂。接下來我們要做的便是完成我們的路由類,首先我們先規範我們的目錄,在core目錄下建立lib資料夾,然後把route.php路由檔案放到裡面,然後在immoc.php檔案中run 方法中通過乙個方法呼叫路由類。route new core lib...

MVC框架的封裝(三)路由類

接下來我們要做的便是完成我們的路由類,首先我們先規範我們的目錄,在core目錄下建立lib資料夾,然後把route.php路由檔案放到裡面,然後在run.php檔案中dump 方法中通過乙個方法呼叫路由類。然後我們回到route路由類中,補充我們的命名空間。我們需要在路由裡面完成我們隱藏我們url中...