Vue中的导航守卫（路由守卫）

先看官方文档
导航守卫就是进行路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，需要结合meta来实现。
vue中路由守卫一共有三种：

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

所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来(from)你要去哪里(to)？然后保安再告诉你下一步该怎么做(next)？如果你的确是这个房子主人允许进入的人，那就让你进入，否则就要打电话给房子主人，跟房主商量(登录注册)，给你权限。

一、全局路由守卫:beforeEach、afterEach

router.beforeEach((to, from, next) => {
    console.log(to) => // 到哪个页面去？
    console.log(from) => // 从哪个页面来？
    next() => // 一个回调函数，跳转到下一个路由
}
router.afterEach（to，from） = {}

next()：回调函数参数配置

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项

二、组件路由守卫：beforeRouteEnter 、beforeRouteUpdate 、beforeRouteLeave

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取组件实例this，只能通过vm来访问组件实例
//因为当守卫执行前，组件实例还没被创建
    next(vm => {})
}
beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用（在当前路由改变，但是该组件被复用时调用）可以访问组件实例this
}
beforeRouteLeave (to, from, next) {
    // 离开当前路由页面时调用（导航离开该组件的对应路由时调用，可以访问组件实例this）
}

三、路由独享守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // ...
            }
        }
    ]
})

下面是我的项目记录，使用了组件内的路由守卫beforeRouteEnter：

app项目中，组件都是缓存状态，
可以看到，除了FollowOrderDetail、dividendChart、dividend都进行了缓存

<keep-alive exclude="FollowOrderDetail,dividendChart,dividend">
    <router-view class="router-view"></router-view>
</keep-alive>

我在其中的一个drawCoin组件中，想要设置，从MywalletPage页面进入，刷新，返回到这个drawCoin页面的时候，组件不进行刷新。

beforeRouteEnter(to, from, next) {
  if(from.fullPath=='/MywalletPage'){//如果是从MywalletPage页面进入
    next(vm=>{
      // ...
    })
  }else{next()}
}