全局后置路由守衛(wèi)（afterEach）

• 功能：每一次切換任意路由組件之后都會(huì)被調(diào)用，相當(dāng)于在進(jìn)入下一個(gè)路由組件之后設(shè)置一個(gè)權(quán)限。

使用原理

• 代碼創(chuàng)建的位置：
  • 在創(chuàng)建router之后（const router = new VueRouter）
  • 暴露router之前（export default router）
• afterEach中的回調(diào)函數(shù)在什么時(shí)候被調(diào)用？
  • 在初始化的時(shí)候執(zhí)行一次，以后每一次切換完任意一個(gè)路由組件之后被調(diào)用
  • 回調(diào)函數(shù)沒(méi)有固定形式，普通函數(shù)或箭頭函數(shù)都可以
• 回調(diào)函數(shù)有兩個(gè)參數(shù)（沒(méi)有next函數(shù)）：
  • to參數(shù)：to是一個(gè)路由對(duì)象，表示到哪兒去（跳轉(zhuǎn)的下一個(gè)路由組件）。
  • from參數(shù)：form是一個(gè)路由對(duì)象，表示從哪來(lái)（從哪個(gè)路由切換過(guò)來(lái)的）。
• 格式：router.afterEach((to, from) => {})
• 自定義屬性（meta）：在路由對(duì)象的添加meta（路由元）
  • 格式：meta : {屬性名:''}
  • title屬性：可以修改頁(yè)面標(biāo)題

import VueRouter from 'vue-router'

import HuBei from '../pages/HuBei'
import City from '../pages/City'

const router = new VueRouter({
    routes : [
        {
            name : 'bei',
            path : '/hubei',
            component : HuBei,
            meta : {title : '湖北省'},
            children : [
                {
                    name : 'wh',
                    path : 'wuhan',
                    component : City,
                    props : true,
                    meta : {
                        isAuth : true,
                        title : '武漢市'
                    }
                },
                {
                    name : 'hs',
                    path : 'huangshi',
                    component : City,
                    props : true,
                    meta : {
                        isAuth : true,
                        title : '黃石市'
                    }
                }
            ]
        }
    ]

})

// 全局后置路由守衛(wèi)
router.afterEach((to, from) => {
    document.title = to.meta.title || '歡迎使用'
})

export default router

// App.vue
<template>
    <div>
        <h2>省</h2>
        <div>
            <ul>
                <li>
                    <router-link to="/hubei">湖北省</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name : 'App'
    }
</script>

// HuBei.vue
<template>
    <div>
        <h2>市</h2>
        <div>
            <ul>
                <li>
                    <router-link :to="{
                        name : 'wh',
                        params : {
                            a1 : wh[0],
                            a2 : wh[1],
                            a3 : wh[2],
                        }
                    }">
                        武漢市
                    </router-link>
                </li>
                <li>
                    <router-link :to="{
                        name : 'hs',
                        params : {
                            a1 : hs[0],
                            a2 : hs[1],
                            a3 : hs[2],
                        }
                    }">
                        黃石市
                    </router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name : 'HuBei',
        data(){
            return{
                wh : ['江岸區(qū)', '江漢區(qū)', '橋口區(qū)'],
                hs : ['下陸區(qū)', '鐵山區(qū)', '西塞山區(qū)']
            }
        }
    }
</script>

// City.vue
<template>
    <div>
        <h2>區(qū)</h2>
        <ul>
            <li>{{a1}}</li>
            <li>{{a2}}</li>
            <li>{{a3}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name : 'City',
        props : ['a1', 'a2', 'a3']
    }
</script>