全局前置路由守卫（beforeEach）

全局前置路由守卫（beforeEach）

• 功能：每一次切换任意路由组件之前都会被调用，相当于在进入另一个路由组件之前设置一个权限。
  • 路由守卫的存在意义就是在不同的时间，不同的位置，去添加代码。
  • 如：Java的filter（过滤器）：在使用哪段代码前先进行过滤（效果类似）

使用方法

• 代码创建的位置：
  • 在创建router之后（const router = new VueRouter）
  • 暴露router之前（export default router）
• beforeEach中的回调函数在什么时候被调用？
  • 在初始化的时候执行一次，每一次切换任意路由组件之前都会调用一次
  • 回调函数没有固定形式，普通函数或箭头函数都可以
• 回调函数有三个参数：
  • to参数：to是一个路由对象，表示到哪儿去（跳转的下一个路由组件）。
  • from参数：form是一个路由对象，表示从哪来（从哪个路由切换过来的）。
  • next参数：next是一个函数，表示允许通过，可以继续向下走。
• 格式：router.beforeEach((to, from, next) => {})
• 自定义属性（meta）：在路由对象的添加meta（路由元）
  • 格式：meta : {属性名:''}
  • title属性：可以修改页面标题
• 以下代码执行效果：通过修改网页标题实现beforeEach的效果

// index.js
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 : '黄石市'
                    }
                }
            ]
        }
    ]

})

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
    let loginName = 'admin'
    // 登录名不相同时显示‘对不起，您没有权限’
    if(to.meta.isAuth){
        if(loginName === 'root'){
            document.title = to.meta.title
            next()
        }else{
            alert('对不起，您没有权限')
        }
    }else{
        document.title = to.meta.title
        next()
    }
})

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 : ['江岸区', '江汉区', '桥口区'],
                hs : ['下陆区', '铁山区', '西塞山区']
            }
        }
    }
</script>

// City.vue
<template>
    <div>
        <h2>区</h2>
        <ul>
            <li>{{a1}}</li>
            <li>{{a2}}</li>
            <li>{{a3}}</li>
        </ul>
    </div>
</template>

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