iView基礎學習(2) 基礎路由

2021-08-31 16:38:01 字數 2452 閱讀 5658

(1)router-link和router-view元件

(2)路由配置

a、動態路由(元件復用)

b、巢狀路由(巢狀元件)

c、命名路由(name路由跳轉)

d、命名檢視(根據name顯示對應的元件)

(3)js路由操作

(4)重定向與別名

about

**解釋:

router-link標籤,將來會渲染成a標籤,其中to

後面是乙個路徑,用於指示路由跳轉

router-view標籤,路由切換後,會顯示在router-view

下面。a、動態路由

在路由配置檔案router.js中,我們進行動態路由配置,可以實現路由的復用。具體做法是在路由的後面拼接引數。具體如下:

其中,name

就是傳入的引數,在對應的元件argu.vue中,進行繫結;若name

改變,那麼元件中繫結也會改變。

頁面顯示效果:

其中,$route表示當前路由,params表示物件引數,name表示動態路由引數,亦即params物件中的key值。

b、巢狀路由

在元件巢狀的地方,我們可以使用巢狀路由,使用步驟如下:

1、router.js檔案中使用childdren配置父子路由;

// router.js  父子路由]}

2、在父元件中使用router-view,顯示子元件;

// 父元件parent

parent父元件內容

c、命名路由在使用 router-link 標籤時,除了使用路徑方式實現路由跳轉外,還可以使用name方式實現路由跳轉。兩種方式的區別在於:路徑方式實現路由跳轉使用的是pathname方式需要使用物件形式。**對比如下:

路徑方式:

about

name方式:

about

的時候,我們需要使用「/」,在使用name方式的時候,需要使用v-bind繫結。

d、命名檢視

另外,還可以為router-view標籤新增name屬性,根據name屬性來顯示對應的元件。**如下:

router.js檔案路由配置

}

about

頁面顯示效果:

關於路由重定向的路由配置如下:

效果:在訪問 http://localhost:8080/#/main 的時候,會自動定向到 http://localhost:8080/#/ 。

另外,以下方式也可以實現路由重定向:

// }

// 方式3

// redirect:

// 方式4

redirect: to => "/"

}

除了給路由 name 外,我們還可以給路由 alias ,即別名,同樣可以訪問到對應的頁面。

效果:訪問 http://localhost:8080/#/home_page 與 http://localhost:8080/#/ 效果相同,都可以訪問到首頁。

np學習 路由基礎

ip網路的基本功能 將資料從乙個地方傳輸到另外乙個地方及為處於網路中不同位置的裝置之間實現資料互通。路由 乙個ip報文從源進入到ip網路之後,網路裝置負責將其 到目的地。在報文的 過程中,沿途的網路裝置收到報文後,會根據其所攜帶的目的ip位址來判斷如何 這個報文,最終將報文從恰當的介面傳送出去。支援...

OSPF路由協議基礎(2)

1 ospf hellow包報文 作用 a 發現和維護鄰居或鄰接關係 b dr和bdr的選舉。如當c裝置接入時,c以224.0.0.6為目標位址,發生ls update報文給dr和bdr,最後由dr告訴全網路由器c裝置的路由資訊。a 如何驗證 乙個hello報文是否合法?答 network mask...

vue學習筆記 路由基礎

一 前面我們提到過單頁面富應用階段,那就要依靠我們的前端路由 vue router 二 配置安裝路由 2 在router資料夾下的index.js中學相關的路由配置 首先匯入路由 import vuerouter from vue router import vue from vue 3.這裡我們同...