Vue路由守卫
路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧，官方一点的解释就是进行操作的鉴权，当操作与之条件匹配时，操作成功，当操作与之不匹配时，操作终止，作用就是是对路由进行权限控制。
在Vue中，路由守卫分为三种：全局路由守卫、独享路由守卫以及组件内路由守卫
全局路由守卫
全局路由守卫，顾名思义，一旦配置，那么作用范围就是所有的路由，全局路由又分为全局前置守卫和全局后置守卫
全局前置守卫
全局前置守卫，组件初始化时调用，每次路由切换之前调用，路由切换之前指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮，但B路由组件还没有被呈现在页面上的时候被调用。
//全局前置守卫
router.beforeEach((to,from,next) =>{
//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
})
全局后置守卫
全局后置守卫，组件初始化时调用，每次路由切换之后调用，路由切换之后指的就是，举个例子说，当前我在A路由组件，我要切换到B路由组件，那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。
//该文件用于创建整个应用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";
//引入路由组件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'
// 引入二级路由组件
import TestBHzw from '../pages/TestBHzw'
import TestBHyrz from '../pages/TestBHyrz'
import DataList from '../pages/DataList'
//创建并暴露一个VueRouter
const router = new VueRouter({
routes:[
//配置路由路径和路由组件
{
//这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混
name:'导航一',
path:'/TestA',
component:TestA, //要跳转到的组件
children:[
{
// 给二级路由起名字
name:'DataName',
path:'DataList/:introduce', //起到占位作用
component:DataList
}
]
},
{
name:'导航二',
path:'/TestB',
component:TestB,
meta:{isAuth:true,},
// 配置二级路由
children:[
{
path:'TestBHzw', //重点注意，不要加 /
component:TestBHzw
},
{
path:'TestBHyrz',
component:TestBHyrz
}
]
}
]
})
//全局前置路由，配合浏览器localStorage进行鉴权操作
router.beforeEach((to, from, next) =>{
//首先，我们先看一看to和from参数，next就是执行的意思，不写页面是不会跳转的
// console.log(to, from);
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('name') === '张三'){
next();
}else{
alert('不好意思，姓名不对，没有权限');
}
}else{
next()
}
})
// 全局后置路由，简单写一个弹窗，在进入每一个路由组件后弹出一句话
router.afterEach(() =>{
alert('欢迎你！！');
})
export default router;
独享守卫
组件独享守卫是在进入组件时被调用,区别就在于，想对那个路由进行权限控制就直接在其路由配置项中添加守卫，作用域也仅限于该路由
beforeEnter(to,from,next){
//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}
组件内守卫
当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用，而组件内守卫的作用于范围也仅限于该组件
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}
