zoukankan      html  css  js  c++  java
  • vue路由拦截

    vue路由拦截

    首先路由拦截分为三种

    1.全局路由守卫

    全局路由守卫分为两个

    前置路由守卫 router.beforeEach((to,from,next)=>{})
    后置路由后卫router.afterEach((to,from,next)=>{})

    概念:

    所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查

    2.路由独享守卫

    beforeEnter(to,from,index)

    概念:

    路由独享守卫是在路由配置页面单独给路由配置的一个守卫(谁需要就配给谁)

    3.组件路由守卫

    组件路由守卫有三种分别是
    beforeRouteEnter (to, from, next) 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此新组件还没被创建。
    beforeRouteUpdate (to, from, next) 同一页面,刷新不同数据时调用,
    beforeRouteLeave (to, from, next)离开当前路由页面时调用

    概念:

    组件路由守卫是指在组件内执行的钩子函数,类似于组件中的methods方法

    使用场景:
    我个人使用的比较多的有全局路由守卫,和路由独享守卫
    1.全局路由守卫通常用在后台管理项目上
    如果判断vuex里没有token的话 跳转到login页面 直到vuex里有保存的token在放行
    2.路由独享守卫 通常用在移动端购物商城上
    如果没有登录的话进入购物车页面会判断是否有token有的话放行,没有弹出对话框提示去注册或登录

  • 相关阅读:
    互联网创业的葵花宝典
    null和undefined的区别
    mpc0.9编译方法
    gmp5.0.5编译
    为iphone及iphone simulator编译poco库
    binutils2.22编译心得
    为iphone及iphone simulator编译qt库
    sql server之触发器调用C#CLR存储过程实现两个表的数据同步
    poco之HttpRequest之get方法
    poco之HttpRequest之post方法
  • 原文地址:https://www.cnblogs.com/luckyjiu9/p/13891035.html
Copyright © 2011-2022 走看看