Vue 路由守卫

---

路由守卫有什么用

对路由进行权限分配，用户未登录或者权限不足，使其无法访问或跳转回登录页, 避免出现修改路径或直接输入首页路径从而跳过登录

---

一、全局路由守卫

在全局中均会触发

1.全局前置守卫

作用：初始化时、每次路由切换前执行

语法

router.beforeEach((to,from,next) => {
	// to 将要去哪里（即将跳转的路由）
	// from 来自哪里 （当前所在的路由）
	// next() 是否放行 （控制路由跳转，若未写，在此所有路由无法跳转）
})

实例

router.beforeEach((to,from,next) => {
	//此次仅做示范，一般判断是否和后端传来的token一致
	if(to.path!=='/login'&&localstorage.getItme(token)!==123456){
			next('/login')
	} else{
			next()
	}
})

2.全局路由后置守卫

作用：初始化时、每次路由切换后执行

语法

router.afterEach((to,from) => {
	// to 将要去哪里（即将跳转的路由）
	// from 来自哪里 （当前所在的路由）
})

实例

const router = new VueRouter({
routes:[{
            path:'/about',
            component:About,
            meta:{title:'关于'}
        }]
       })
       //全局后置守卫
router.afterEach((to,from) => {
	 //修改网页的title(标题)
	document.title = to.meta.title //一般提前将标题保存在mate中
})

---

二、独享路由守卫

注册路由时使用
语法：beforeEnter(to,from,next){ }

const router = new VueRouter({
    routes:[
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                    meta:{title:'新闻'},
                    //独享守卫，特定路由切换之后被调用
                    beforeEnter(to,from,next){
                        console.log('独享路由守卫')
                    }
                }]
                }

---

三、组件路由守卫

用于组件之中
前置： beforeRouteEnter (to, from, next) {}
后置： beforeRouteLeave (to, from, next) {}

<template>
<div></div>
</template>

<script>
    export default {
        name:'About',
        // 通过路由规则，离开该组件时被调用
        beforeRouteEnter (to, from, next) {},
        // 通过路由规则，离开该组件时被调用
        beforeRouteLeave (to, from, next) {}
    }
</script>