zoukankan      html  css  js  c++  java
  • vue 路由守卫(导航守卫)

    官方文档

    导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览,需要结合meta来实现
    vue中路由守卫一共有三种,一个全局路由守卫,一个是组件内路由守卫,一个是router独享守卫
    所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里来?总不能随便陌生人就给放进去?要到哪里去?然后保安再告诉你下一步该怎么做?如果你的确是这个房子主人允许进入的人,那就让你进入,否则就要打电话给房子主人,跟房主商量(登录注册),给你权限。

    // 通过这个匹配判断是否有该权限或要求,这个一般作为页面权限设置,比如哪些页面需要登录才能进入,哪些不需要
    to.matched.some(res => res.meta.requireAuth) 
    

    一、全局路由守卫

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

    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 中的选项
    

    二、组件路由守卫

    // 跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
    beforeRouteEnter (to, from, next) {
        // 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例
        next(vm => {})
    }
    beforeRouteUpdate (to, from, next) {
        // 同一页面,刷新不同数据时调用,
    }
    beforeRouteLeave (to, from, next) {
        // 离开当前路由页面时调用
    }
    

    三、路由独享守卫

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

    export default new VueRouter({
        routes: [
            {
                path: '/',
                name: 'home',
                component: 'Home',
                beforeEnter: (to, from, next) => {
                   // ...
                }
            }
        ]
    })
    
  • 相关阅读:
    关于 Unity WebGL 的探索(二)
    关于 Unity WebGL 的探索(一)
    Ghostscript 中 ps2pdf 命令在 windows msys 下的运行错误问题。
    编译 Windows 版本的 Unity Mono(2017-03-12 20:59)
    Windows 下使用 mingw+msys 交叉编译 Android Unity Mono
    关于 UGUI 字体花屏或乱码。
    从 NavMesh 网格寻路回归到 Grid 网格寻路。
    Unity光照图UV显示
    2DPlatformer-SLua 编辑器 UI 美化
    SnapDragon Profiler 学习
  • 原文地址:https://www.cnblogs.com/zjh-study/p/10647220.html
Copyright © 2011-2022 走看看