1. 路由導航守衛(wèi)擴展
我理解的導航守衛(wèi) 就是一座房子的保安 只有保安允許了才能訪問頁面
之前說三種六個 還有一個用的不是很多的全局守衛(wèi) 叫做全局解析守衛(wèi) beforeResolve
導航守衛(wèi)一共有三種
全局的守衛(wèi) 守衛(wèi)所有的頁面
beforeEach 路由前置守衛(wèi)
beforeResolve 路由解析之前
afterEach 路由離開
全局守衛(wèi) beforeEach 和 beforeResolve
他們兩個都會在路由跳轉(zhuǎn)前就執(zhí)行 參數(shù)都是 to from next
他們兩個的區(qū)別 執(zhí)行的時機不一樣 beforeEach 是在路由規(guī)則被循環(huán)之前執(zhí)行
beforResolve 是在組件被解析之后調(diào)用 beforeEach 要比 beforResolve 先執(zhí)行
組件守衛(wèi) 守衛(wèi)單個組件
beforeRouteEnter 路由進入
beforeRouteUpdate 路由更新
beforeRouteLeave 路由離開
獨享守衛(wèi) 守衛(wèi)單個頁面
beforeEnter 路由進入之前
三種守衛(wèi)全局 組件 獨享守衛(wèi)的區(qū)別：
- 作用范圍不同 全局作用于所有頁面 組件作用于單個組件 獨享也是守衛(wèi)單個頁面
- 代碼寫的位置不一樣 全局守衛(wèi)寫在 router/index.js 中 組件守衛(wèi)寫在組件里 跟 data 同級 獨享守衛(wèi)寫在路由規(guī)則里
- 執(zhí)行順序有區(qū)別 執(zhí)行的順序要記下來
beforeEach 前置守衛(wèi)
beforeEnter 獨享守衛(wèi)
beforeRouteEnter 組件守衛(wèi)
beforeResolve 解析守衛(wèi)
afterEach 路由后置守衛(wèi)
2.組件傳值的八種方式
- 父傳子
- 首先在使用子組件的標簽上 通過自定義屬性傳遞變量 在子組件中 通過 props 接受
在接收的時候有兩種接收方式 數(shù)組形式 和 對象形式 對象形式可以規(guī)定傳來的變量的數(shù)據(jù)類型（type）默認值（default）以及是否必填（required）
- 子傳父
首先在使用子組件的標簽上定義一個自定義事件 在子組件里通過 this.emit 方法的第一個參數(shù)是自定義事件的名字 第二個參數(shù)是就是子組件要傳遞給父組件的變量 最后在父組件接收使用就可以了
- 兄弟組件
- 利用中央事件總線 eventbus
在 main.js 中 把一個空的 vue 實例掛載在 vue 的原型上起名叫bus.
on 方法接收
利用 vuex 進行組件通信 把公共的數(shù)據(jù)存在 vuex 里就可以實現(xiàn)組件之間都能使用這個數(shù)據(jù)了
其實 v-model 也能實現(xiàn)組件通信 因為 v-model 就是 :value 和 @input 事件的合寫 如果在一個子組件上使用 v-model 也能實現(xiàn)父子組件之間的通信
listener
如果父組件 A 下面有子組件 B 子組件 B 下面又有子組件 C 如果 a 組件的變量和方法想要傳給組件 C 的時候 就用到這個方法 適用于多級組件傳值
在 B 組件中給 C 組件綁定 v-bind="listeners" 然后在 C 組件中就可以直接使用 a 傳來的屬性和方法了
（簡單來說：listeners 是兩個對象，
listeners 里存放的是父組件中綁定的非原生事件妒潭。）
