vue router 學習筆記(基本內容)

2021-08-20 09:38:30 字數 1607 閱讀 5109

1.帶引數路由

routers:[

]

使用引數:

$router.params.id

2.兩個路由都渲染同個元件

復用元件時,想對路由引數的變化作出響應,watch (監測變化) 

watch

}

或者使用beforerouteupdate (目標路由和當前路由相同,只是引數發生變化)

beforerouteupdate(to,from,next)
3.匹配的優先順序就按照路由的定義順序:誰先定義的,誰的優先順序就最高。

4.在元件中巢狀路由

routes: [,]

}]

5.代替a連線

6.程式設計式導航

router.push('index') //字串

router.push() //路由path

router.push('}) //帶參路由

router.push(}) //路由中帶引數,需要提供路由名稱

router.push(}) //帶查詢引數

7.oncomplete和onabort

oncomplete:導航完成後呼叫(在所有的非同步鉤子被解析之後)

onabort: 導航到相同的路由、或在當前導航完成之前導航到另乙個不同的路由

用法:router.replace(location, oncomplete?, onabort?)

8.router.replace和router.push

作用相同,區別:router.replace是替換和當前的history記錄而不產生新的history

9.回退

router.go(1)  

router.go(-1)

goback()

10.命名路由

user  //宣告式

router.push(}) //程式設計式

11.命名檢視

routes: [

}]

12.重定向

routes: [

]

routes: [

}]

routes: [

}]

13.別名

routes: [

]

14.解耦合

routes: [

,// 對於包含命名檢視的路由,你必須分別為每個命名檢視新增 `props` 選項:

,props:

}]

15.props 函式模式

routes: [

) }]

url /search?q=vue 會將 作為屬性傳遞給 searchuser 元件。

Vuerouter學習筆記

vue路由的作用 將元件 components 對映到路由 routes 然後告訴 vue router 在 渲染它們 前端路由是 對映關係 是路徑和元件的對映關係 vuerouter 路由器物件 然後 該物件有routes屬性 其為路由們配置,為陣列,陣列中每個值為乙個路由,路由就是相應的對映 步...

vue router之學習筆記

用 vue.js vue router 建立單頁應用,是非常簡單的。使用 vue.js 我們已經可以通過組合元件來組成應用程式,當你要把 vue router 新增進來,我們需要做的是,將元件 components 對映到路由 routes 然後告訴 vue router 在 渲染它們。在vue開發...

Vue Router 學習筆記(基礎篇)

vue router提供來做 路由出口,渲染路徑匹配到的檢視元件。渲染的元件還可以內嵌自己的,根據巢狀路徑,渲染巢狀元件。路由檔案中 const router newvuerouter 有時候想同時 同級 展示多個檢視,而不是巢狀展示,例如建立乙個布局,有sidebar 側導航 和main 主內容 ...