路由的鉤子：（即導(dǎo)航守衛(wèi)）

1.全局的,

constrouter =newVueRouter({ ... })router.beforeEach((to,from, next) =>{// ...})

2.單個(gè)路由獨(dú)享的

constrouter =newVueRouter({routes: [? ? {path:'/foo',component: Foo,beforeEnter:(to,from, next) =>{// ...}? ? }? ]})

3.組件級(jí)的槽奕。

beforeRouteEnterbeforeRouteUpdate?

(2.2新增)beforeRouteLeaveconstFoo = {template:`...`,? beforeRouteEnter (to,from, next) {// 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用// 不膝昆！能匾鸥！獲取組件實(shí)例 `this`// 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建},? beforeRouteUpdate (to,from, next) {// 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用// 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候昌腰，// 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用膀跌。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用遭商。// 可以訪問(wèn)組件實(shí)例 `this`},? beforeRouteLeave (to,from, next) {// 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用// 可以訪問(wèn)組件實(shí)例 `this`}}

路由元信息：給路由表每項(xiàng)添加的meta

例如：

{name:'find',? ? ? ? path:'/find',? ? ? ? component:find,? ? ? ? meta:{? ? ? ? ? title:'我是發(fā)現(xiàn)組件',? ? ? ? },

5.16組件通訊

組件通訊

一、組件：組件是可復(fù)用的 Vue 實(shí)例二捅伤、創(chuàng)建組件：1.全局組件? ? Vue.component('my-component-name', {// ... 選項(xiàng) ...})

例如：

import Vue from'vue';//定義一個(gè)全局組件? ? Vue.component('myCom1',{template:"

2.局部組件? ? ??

? var ComponentA = {/* ... */}? ? ? ? ?

?然后在 components 選項(xiàng)中定義你想要使用的組件：? ? ? ? ? ? ? ?

?new Vue({el:'#app'components:{'

????????component-a': ComponentA,? ??

? ? ? }

三劫流、組件通訊? 父?jìng)髯?

1.創(chuàng)建兩個(gè)組件A.vue和B.vue，并在A.vue中引入B.vue，并注冊(cè)

2.在A.vue引入的子組件自身添加要傳遞的屬性? ? ? ? ? ? ??

? ? 例如：

3.在B組件中接收A.vue組件中傳遞過(guò)來(lái)的值祠汇，通過(guò)props接收? ? ??

? 具體props有兩種寫法：數(shù)組和對(duì)象（帶驗(yàn)證）? ? ? ??

? ? 例如：? ? ? ??

?export default {

????????//props:['yonghu','dizhi','age'],

? ? props:{

????????'yonghu':{type:[String]? ? ? ? ?

? ? },

? ? ?'dizhi':{

????????????type:String? ? ? ? ? ??

? ? ? ?},

????'age':{

????????type:Number,default:0

? ? ?}? ? ? ? ? ? ? ?

?},??

子傳父：

主要通過(guò)事件派發(fā)實(shí)現(xiàn)仍秤，具體通過(guò)$emit實(shí)現(xiàn)? ??

? ? 派發(fā)事件：$emit()? ? ?

?? 接收事件：@事件名戒v-on

兄弟之間：（即非父子）

1.Event Bus:通過(guò)一個(gè)空的vue（即橋梁）實(shí)現(xiàn)兄弟之間數(shù)據(jù)傳遞? ??

?第一步：創(chuàng)建兩個(gè)兄弟組件并引入到其他組件中? 例如：son1,son2? ? ? ??

?第二步：創(chuàng)建一個(gè)空的vue? 例如：bus.js? ? ? ??

?第三步：分別在兩個(gè)兄弟組件中引入bus.js? ? ? ? ?

第四步：例如：son1數(shù)據(jù)發(fā)送給son2,在son1通過(guò)觸發(fā)一個(gè)事件響應(yīng)來(lái)派發(fā)

importBusfrom'@/components/common/bus';向son2發(fā)送數(shù)據(jù)methods:{ goToSon2() {

????????// 派發(fā)事件

????????Bus.$emit('ok',this.msg)

?}

第五步：在生命周期鉤子上監(jiān)聽(tīng)son1派發(fā)過(guò)來(lái)的事件? $on? ? ? ? ? ?

?? ? ? ? ? ? created(){

????????????????//監(jiān)聽(tīng)事件

????????????????Bus.$on('ok',(v)=>{// console.log(v);this.name=v;? ? ? ? ? ??

? ? ? ? ? })? ? ? ? ? ? ??

? ? ? }