Vue---- 路由（下）-- 导航守卫

导航守卫

        vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有三种方式植入路由导航

• 全局守卫
• 单个路由独享守卫
• 组件内守卫

导航守卫---全局守卫

全局守卫分为两种：

• 全局前置守卫：当一个导航触发时，就会触发全局前置守卫；可以在全局前置守卫中做出业务逻辑处理；
• 全局后置钩子：当一个导航触发时，会触发全局前置守卫，同样，会触发全局后置钩子，因为进入一个新的，必定要离开一个旧的。但是，后置钩子不会改变导航本身；

1，全局前置守卫：

可以使用router.beforeEach注册一个全局前置守卫：

可以返回的值：

1. false   取消当前的导航。在取消当前路由导航时，一定要配合正确的业务逻辑去处理。

 2. 一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用 router.push() 一样。     3. 不写return，或者返回undefined或者true,进入下一个路由。

可以在什么时候使用呢！

1.访问页面的任意路径时，如果没有登录，则跳转到登录页面；

2，访问登录页面时，如果已经登陆过，则跳转到首页等；

2，全局后置钩子：

可以在什么时候使用呢！

设置标签页标题、浏览器窗口滚动到0的位置等。

导航守卫---路由独享守卫

它是写在路由表中的守卫，针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的！

{
    path:'/users/:id',

    component:UserDetails,

    beforeEnter:(to,from) => {

    //reject the navigation

    return false
}

}

beforeEnter守卫：只在进入路由时触发，不会在params、query或hash 改变时触发。

可以在哪使用呢！

权限控制上。比如用户想进入个人中心时，如果未登录则进入登录组件。 

导航守卫--组件内守卫

可以在路由组件内直接定义路由导航守卫，当组件被渲染时，路由守卫才会被触发。

组件内守卫有三个：

• beforeRouteEnter
• beforeRouteUpdate
•  beforeRouteLeave

beforeRouteEnter

 在渲染该组件的对应路由被验证前调用 不能获取组件实例 `this` 因为当守卫执行时，组件实例还没被创建

    vm将作为当前组件的实例，可以调用组件的属性和方法;

导航守卫--组件更新守卫

在当前路由改变，但是该组件被复用时调用

与$watch 监听路由变化一样

导航守卫--组件离开守卫

当离开当前组件时，会触发离开守卫；     

通过return控制开行为

在什么时候使用呢！

清除本页面计时器，节省内存 当组件中有未关闭的窗口，未保存的数据离开时，给出提示     存储一些信息到本地

---

路由元信息

 如果想在路由上附加一个额外信息，可以在定义路由时， 通过meta属性实现。     然后可以在路由守卫中（to,from）获取元信息，完成业务逻辑需求

 路由切换过渡特效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot指令；

‘Component’(不能写成其他名字) 是你切换时对应的组件，你可以在transition上使用以前的所有过渡方式; 

OK，本文到此结束，希望本文对你有所帮助 😃

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。