路由守卫

路由守卫在开发者中的也是特别多的，主要是对路由进行权限控制，分为全局守卫、独享守卫、组件内守卫，下面一一根据案例说明

比如说有的路由不是随便看的，需要登录之后才可以看，比如说淘宝的个人中心，肯定是登录之后才能看的，下面进行简单演示

现在需要验证身份，这里我存在 localstorage 里面一个简单的数据作为验证凭证，如果 name 为 zhangsan，才能查看 news 和 message 的路由信息，不然是查看不了的

当然也可以存在 vuex 中，或者是缓存，实际开发中有时候也会是用户的 token

想要实现这种需求，最好的方式就是去 router 路由器中配置规则，这时候就不能直接暴露了，不然无法增加校验规则

全局守卫

它分为前置和后置两种守卫

前置路由守卫(beforeEach)

它是 router 中的一个方法，在初始化的时候和每次路由切换之前被调用

可以看到初始化和点击切换路由都会进行函数执行

但是没跳到路由对于的页面，这时候需要知道它的三个参数,分别是 to,from,next

to(去哪)

from(从哪来)

next(放行)

如果需要放行，加上 next()即可

这就是从哪来到哪去以及路由放行

动态放行

接下来就可以通过是否放行的标志进行动态放行了，一般从服务器获取，这里做演示写的比较简单从 localStorage 获取校验了

这里我故意让两个参数对不上不放行

这样怎么点路由也不会跳转了

但是这样太暴力了，我想要更精细的路由判断，那么可以这么做

精准校验路由

通过这种方式，可以放行一些路由和对指定路由进行控制，而不是全部路由

不想用路径当然可以用 name 去判断

// 全局前置路由守卫 在初始化的时候和每次路由切换之前被调用router.beforeEach((to,from,next)=>{   if(to.path==='/home/news' || to.path==='/home/message'){     // 如果从localStorage获取到的name为zhangsan就放行     if(localStorage.getItem('name')==='zhangsan1'){        next()    }else{        alert('参数校验失败，无权限查看')    }   }else{     next()   }})

前置路由一个问题就是如果要对多个路由进行拦截，那么需要写很多个判断

这样就会显得非常麻烦，针对这种情况，我们可以给每一个路由里面定义一个属性，如果为真就需要校验权限，为假就放行

但是这种方式加了也没用，路由的配置都是写死的，不是想加什么就能加的

meta(路由元信息)属性判断校验

如果真的想加自定义的属性，可以放在 meta 里面，meta 里面专门准备了一个容易供我们存自定义数据信息，一般是键值对，多个属性使用逗号隔开

这样就可以把参数放到需要校验的路由里面了，如果不需要校验可以直接不写

这样的写法相对来说更简单