局部路由守衛path守衛

path守衛（beforeEnter）

• 代碼位置：path守衛代碼寫在route對象中（index.js文件）
• beforeEnter是一個函數，參數上沒有回調函數
• beforeEnter有三個參數：
  • to參數：to是一個路由對象，表示到哪兒去（跳轉的下一個路由組件）。
  • from參數：form是一個路由對象，表示從哪來（從哪個路由切換過來的）。
  • next參數：next是一個函數，表示允許通過，可以繼續向下走。
• 格式：beforeEnter(to, from, next){}
• beforeEnter執行時機：在進入到path守衛所在的路由前會被調用

// 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 : '武漢市'
                    },
                    // path守衛
                    beforeEnter(to, from, next){
                        // 這里設置了登錄名為root
                        let loginName = 'root'
                        if(loginName === 'admin'){
                            next()
                        }else{
                            alert('對不起，您沒有權限')
                        }
                    }
                },
                {
                    name : 'hs',
                    path : 'huangshi',
                    component : City,
                    props : true,
                    meta : {
                        isAuth : true,
                        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 : ['江岸區', '江漢區', '橋口區'],
                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>