學習路由器vue router

2021-09-13 03:27:35 字數 1575 閱讀 3334

vue-router:vue官方路由管理器。

功能:巢狀的路由/檢視表

模組化的、基於元件的路由配置

路由引數、查詢、萬用字元

基於 vue.js 過渡系統的檢視過渡效果

細粒度的導航控制

帶有自動啟用的 css class 的鏈結

html5 歷史模式或 hash 模式,在 ie9 中自動降級

自定義的滾動條行為

安裝 npm i vue-router

1.建立單條路由

let index =
2.將多條路由合併為一組

let routes = [

index,

頁面2,

頁面3]

3建立路由物件

const router = new vuerouter()
4在根例項上引用

new vue().$mount(root)
1、以params作為引數傳遞

建立路由

```const pagea =

```跳轉路由的鏈結

```go to pagea

```或者傳path屬性

```go to pagea

```頁面跳轉成功後瀏覽器url為顯示為 /pagea/id

this.$route.params.id來獲取

2.以query作為引數傳遞
const pagea =
跳轉路由的元件

```go to pagea

```瀏覽器url上顯示為/pagea?id=1

this.$route.query.id獲取

在任何元件中都可以通過this.$router 獲得路由物件,this.$route訪問的當前路由

全域性導航守衛,頁面每一次跳轉都可以監聽,也可以放到元件中單獨使用

router.beforerouteupdate (to, from, next)
檢視

router-link跳轉的元件需要加上檢視router-view才能顯示,

當乙個頁面有多個檢視時用name來區分

檢視命名,路由裡的component裡的name為鍵名對應router-view name=a

//路由

const pagea =

//這條路由的意思是跳轉到/pagea時顯示name為a的檢視,name=a的檢視對應的元件也就是pagea.vue

巢狀路由

例如需要乙個tab導航欄,單擊選單時切換元件,但是導航選單不變。

const route = [,]

}]

goto pagea 

goto pageb

路由器連線路由器

有兩種方法!無論哪種,和貓接的主路由總是不變!只要改從路由的設定!第一。從路由還是當路由用!設定 路由a為主路由,路由b為從路由!假設你現在有兩個路由 路由a 和 路由b 同時使用的是adsl撥號上網。首先,設定路由a的wan口狀態設定為pppoe撥號狀態,然後填入adsl撥號的賬號和密碼。然後,設...

無線路由器連線路由器

接觸過寬頻路由器的使用者,大抵都了解寬頻路由器上的埠有wan口和lan口之分。寬頻路由器在工作過程中有這樣乙個特點 從lan到wan方向上的資料流預設不受限制通過路由器,從wan到lan方向上預設不能通過。注 無線寬頻路由器的無線接入部分從屬於lan的範圍 也就是說,預設情況從區域網內電腦上發出的資...

路由器DHCP功能學習

家用無線路由器開啟dhcp功能詳細分析見上面鏈結。乙個用於 tcp ip 協議的 配置項,是乙個可直接到達的 ip 路由器的 ip 位址。配置預設 閘道器可以在 ip 路由表中建立乙個預設 路徑。一台 主機可以有多個 閘道器。預設 閘道器 的意思是一台 主機如果找不到可用的閘道器,就把 資料報發給預...