精华内容
下载资源
问答
  • 路由守卫vue使用场景
    千次阅读
    2019-07-01 20:32:11
        beforeRouteLeave(to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            if(!this.isPublish){
                this.confirmVisible=true
                next(false)//不放行
            }else {
                next()
            }
    
        },
    更多相关内容
  • vue-router的官方文档中, 将路由钩子翻译为导航守卫。 1. 路由钩子语法 1.1 全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... }) router.beforeEach((to, ...
  • 最近在学习vue路由守卫,感觉路由守卫这里知识点挺多的,来做个小笔记。 一、路由守卫是什么? 路由守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件...

    目录

    前言

    一、路由守卫是什么?

    二、路由守卫全解析

    先来看一下钩子函数执行后输出的顺序吧

    1.全局路由守卫

    2.组件路由守卫

    3.路由独享守卫

     单独介绍一下路由守卫钩子三个参数



    前言

    最近在学习vue路由守卫,感觉路由守卫这里知识点挺多的,来做个小笔记。


    一、路由守卫是什么?

    路由守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

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

    二、路由守卫全解析

    先来看一下钩子函数执行后输出的顺序吧

    导航守卫分为:全局的、单个路由独享的、组件内的三种。分别来看一下:

    1.全局路由守卫

    所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查
    全局路由守卫有个两个:一个是全局前置守卫,一个是全局后置守卫 ,钩子函数按执行顺序包括beforeEachbeforeResolveafterEach三个。

    router.beforeEach((to, from, next) => {
      console.log(to) => // 到哪个页面去?
      console.log(from) => // 从哪个页面来?
      next() => // 一个回调函数
    }
    router.afterEach(to,from) = {}

     [beforeEach]:在路由跳转前触发,参数包括to,from,next(参数会单独介绍)3个,这个钩子作用主要是用于登录验证,就是路由还没跳转前告知,跳转后再通知就晚了。

    [beforeResolve]:在组件被解析后,这个钩子函数和beforeEach类似,也是路由跳转前触发,参数也是to,from,next三个。

    [afterEach]:和beforeEach相反,它是在路由跳转完成后触发,参数包括to,from没有next,它发生在beforeEach和beforeResolve之后,beforeRouteEnter之前。

    2.组件路由守卫

    组件路由守卫就是在组件内执行的钩子函数,类似于组件内的生命周期钩子函数按执行顺序为beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave三个。

    beforeRouteEnter (to, from, next) {
      // 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例
      next(vm => {})
    }
    beforeRouteUpdate (to, from, next) {
      // 同一页面,刷新不同数据时调用,
    }
    beforeRouteLeave (to, from, next) {
      // 离开当前路由页面时调用
    }

    [beforeRouteEnter]:路由进入之前调用,参数包括to,from,next。该钩子函数在全局守卫beforeEach和独享守卫beforeEnter之后,全局beforeResolve和全局afterEach之前调用。

    [beforeRouteUpdate] :在当前路由改变时,并且该组件被复用时调用,可以通过this访问实例。参数包括to,from,next。当前路由query变更时,该守卫会被调用

    [beforeRouteLeave]:导航离开该组件的对应路由时调用,可以访问组件实例this,参数包括to,from,next。

    3.路由独享守卫

    目前它只有一个钩子函数beforeEnter

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

    [beforeEnter]:和beforeEach完全相同,如果都设置则在beforeEach之后紧随执行,参数to、from、next

     单独介绍一下路由守卫钩子三个参数

    to:目标路由对象;

    from:即将要离开的路由对象;

    next:它是最重要的一个参数,调用该方法后,才能进入下一个钩子函数。

            next()//直接进to 所指路由
            next(false) //中断当前路由
            next('route') //跳转指定路由
            next('error') //跳转错误路由

    展开全文
  • 界面中可以通过三种方式植入路由:全局, 单个路由独享, 组件级。 全局前置守卫:首先需要注册全局路由 import router from "./router";...new Vue({ el: "#app", store, router, components: { A...

    界面中可以通过三种方式植入路由:全局, 单个路由独享, 组件级。

    • 全局前置守卫:首先需要注册全局路由
    import router from "./router";
    router.beforeEach((to, from, next) => {
      // ...
    });
    new Vue({
      el: "#app",
      store,
      router,
      components: { App },
      template: "<App/>"
    });
    

    应用场景:栗子,验证用户登录过期

    router.beforeEach((to, from, next) => {
      if (to.matched.some(m => m.meta.auth)) {
        // 对路由进行验证
        if (isLogin("isLogin") === "1") {
          // 根据后台返回值判断是否登录过期
          // 已经登陆
          next(); // 正常跳转页面
        } else {
          // 未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来;
          next({ path: "/", query: {} });
        }
      } else {
        next();
      }
    });
    
    • 路由独享的守卫:在路由配置上使用
    routes: [
      {
        path: "/foo",
        component: Foo,
        beforeEnter: (to, from, next) => {
          // ...
        }
      }
    ];
    
    • 组件内的守卫:直接在组件内像生命周期一样使用
      Vue 判断路由变化也可以使用组件内的守卫 beforeRouteLeave。beforeRouteLeave 接收三个参数:to(即将要跳转到的地址)、from(当前地址)、next(回调),中文释义就是“从哪里去哪里”。例如从/A跳转到/B,to 就是/Bfrom 就是/A

    栗子:在用户离开当前界面时询问

      beforeRouteLeave(to, from, next) {
        let pathName = this.$route.path.match(/\w+/)[0]
        if (from.name === pathName) {  // 如果是需要加判断的界面
          this.$createDialog({
            type: 'confirm',
            content: '是否离开当前界面?',
            confirmBtn: {
              text: '确定',
              active: true,
            },
            cancelBtn: {
              text: '取消',
              active: false,
            },
            onConfirm: () => {
              next()   // 点击确定之后才会继续跳转
            },
            onCancel: () => {
              next(false)    // next false终止跳转
            },
          }).show()
        } else {
          next()
        }
      },
    

    适用场景:有编辑操作的界面。可以配合本地存储(比如 localStorage)获得更好的体验效果。判断用户有操作界面离开的动作时,将用户已经编辑的内容存储在本地,当用户再次访问界面先判断这个界面下有没有存储内容,有则根据需要将内容恢复。

    栗子:以下为伪代码,仅提供思路

    //监听用户编辑时缓存数据
    this.$watch(
        () => this.datas,
        () => {
        this.isChanged = true
        ...
            // 处理  localStorage()
            //保存数据的方法
        ...
        },
        {
        deep: true,
        },
    )
    

    判断数据是否有变化后,在离开界面的时候询问

     beforeRouteLeave(to, from, next) {
        // 页面离开时,询问是否保存编辑数据
        pageUtils.pageLeave(() => this.isChanged, this.getCacheKey(), next)   // getCacheKey存储数据的key方法
      },
    
    
    function pageLeave(callback, key, next) {
      // 判断页面数据是否有变化
      if (callback()) {
        Dialog.$create({   // UI模态框
          type: "confirm",
          content: "您填写的内容尚未保存,请确认是否离开?",
          confirmBtn: {
            text: "暂存并离开",
            active: true
          },
          cancelBtn: {
            text: "直接离开",
            active: false
          },
          onConfirm: () => {
            next();
          },
          onCancel: () => {
            // 移除缓存数据
            removeCache(key); // 存储数据的key
    
            next();
          }
        }).show();
      } else {
        next();
      }
    }
    
    展开全文
  • vue路由守卫使用

    2020-06-16 22:04:43
    vue router.afterEach(全局后置守卫) router.beforeEach 是页面加载之前,router.afterEach是页面加载之后 单个的路由钩子函数:beforeEnter 组件内的路由钩子函数:beforeRouteEnter、beforeRouteLeave、...

    vue路由钩子函数:

    路由的钩子函数总结有6个

    全局的路由钩子函数:beforeEach、afterEach

    vue router.afterEach(全局后置守卫)
    router.beforeEach 是页面加载之前,router.afterEach是页面加载之后

    单个的路由配置内使用的钩子函数:beforeEnter

    组件内的路由钩子函数:beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

    所有钩子函数参数都为 (to,from,next)

    to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性

    from: (Route路由对象) 当前导航正要离开的路由

    next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

    应用场景:可进行一些页面跳转前处理,例如判断需要登录的页面进行拦截,做登录跳转!

    
    router.beforeEach((to, from, next) => {
        if (to.meta.requireAuth) {
            //判断该路由是否需要登录权限
            if (token) {
                //通过读取token,如果存在,name接下一步如果不存在,那跳转回登录页
                next()//不要在next里面加"path:/",会陷入死循环
            }
            else {
                next({
                    path: '/login',
                    query: {redirect: to.fullPath}//将跳转的路由path作为参数,登录成功后跳转到该路由
                })
            }
        }
        else {
            next()
        }
    })
    

    路由独享的守卫(路由内部钩子)

    在路由上直接配置 beforeEnter 守卫:

    
    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo, // 这儿你可以使用路由懒加载引入
          beforeEnter: (to, from, next) => {
            // 
          }
        }
      ]
    

    组件内的守卫(组件独享钩子)

    1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

    beforeRouteEnter (to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不能!获取组件实例 this
      // 因为当钩子执行前,组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
      // 当转一个同一个页面中,当页面地址栏的参数发生变化时候,而数据并没有实时的进行更新,需要刷新页面才会显示新的数据,可通过to获取到路由的参数
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 this
    }
    
    展开全文
  • vue路由守卫

    2022-01-11 18:56:00
    vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中: 全局的, 单个路由独享的, 或者组件级的。 全局守卫 全局前置守卫router.beforeEach 全局解析守卫router....
  • vue中路由守卫一共有三种,一个全局路由守卫,一个是组件内路由守卫,一个是router独享守卫。 一、全局路由守卫 所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过...
  • 一个实例了解路由守卫
  • vue3中使用路由守卫(简单易懂哦)

    千次阅读 多人点赞 2022-05-05 09:05:05
    vue3中使用路由守卫使用场景beforeEach (全局前置守卫)beforeEnter (路由独享守卫)beforeRouteEnter (组件内部守卫) 使用场景 我们在进行项目的实际开发中,可能会遇到一个问题:“如果我们没有登录的时候一些...
  • vue中路由守卫使用

    2020-08-24 23:26:49
    路由守卫 路由钩子函数有三种: ​ 1:全局钩子: beforeEach、 afterEach ​ 2:单个路由里面的钩子: beforeEnter、 beforeLeave ​ 3:组件路由:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 主要是...
  • vue路由守卫vue中的ajax请求
  • 详解Vue路由钩子及应用场景

    千次阅读 2018-10-11 10:05:52
    vue-router的官方文档中, 将路由钩子翻译为导航守卫, 下面是文档中的内容摘要, 大家也可以通过传送门前往官网阅读详细内容 (一).全局守卫(全局路由钩子) 你可以使用 router.beforeEach 注册一个全局前置守卫: ...
  • vue路由全局守卫

    2022-06-04 21:08:08
    Vue路由全局守卫的用法和使用场景加解析,非常清楚
  • vue 路由导航守卫(全局守卫路由独享守卫、组件内守卫)
  • vue2.0路由守卫

    2019-07-21 23:41:56
    路由守卫,顾名思义也就是为路由添加守卫。路由可以说是端到端的网络路径。具体要守卫路由什么呢? 一般是做路由跳转前做一些验证,常见场景比如登录状态验证等。 vue-route 提供的 beforeRouteUpdate 可以便捷地...
  • vue路由守卫的基本使用 基本介绍 路由守卫: 每个路由在执行的时候都会经历一些"关口",关口可以决定是否 继续前进 或 执行其他路由 或 停止当前路由执行 ,关口就是守卫,有着一夫当关万夫莫开的效果。 应用场景:...
  • 以下总结了路由钩子函数的使用方法和一些使用场景。 一、全局守卫 router.beforeEach 路由改变前的钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中: to...
  • 主要介绍了详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 为什么要设置路由拦截? 一.为什么要有请求拦截呢?请求拦截都做了什么? 请求拦截在你发送请求的时候可以做 1.比如说你每次发送请求的时候有的请求需要携带token,每次发就会重复 这个时候请求拦截就可以在你发...
  • 路由守卫使用场景? 首先,如何给路由添加一个权限判断呢?例如,用户在登录的状态下就能去到某页面,但是未登录则给你弹出一个未登录的提示。 路由守卫的目标是实现这样一个权限判断,在路由跳转之前,会触发一...
  • 本篇文章主要介绍了详解Vue路由钩子及应用场景(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 什么是导航守卫 : 导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 router.beforeEach((to,from,next)=>{ 。。。。。。 } 全局...
  • 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。 贴上文档地址...
  • Vue + TypeScript 实战(四)路由守卫

    千次阅读 2022-04-22 16:09:22
    1、什么是路由守卫路由守卫又称导航守卫,指是 路由跳转前、中、后过程中的一些钩子函数 。官方解释是vue-router提供的导航守卫,要通过跳转或取消的方式来守卫导航。路由守卫分为三种,全局路由、组件内路由,...
  • 例: beforeRouteEnter (to, from, next) { ...由于vue实例化在此阶段还没完成实例化, 所以在beforeRouteEnter方法中不能用this, 但是可以通过next返回的参数来访问示例内的属性并赋值, 常见场景是该组件需要.
  • 在你想要使用的组件内...我这里的使用场景是面包屑 然后进行了一个to from的匹配 beforeRouteEnter(to, from, next) { next((vm) => { switch (from.name) { case "Home": vm.fromname.name = "首页"; vm.f
  • 注意: 这里描述的不是任意组件,而是路由级别的组件 代码: // 定义在组件内部的 beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当...
  • component: Order }, { path: 'system', component: System }, // 开启传参 { path: 'user/:id', component: Detail, props: true } ] } ] }) // 全局路由守卫,设置访问的权限 router.beforeEach((to, from, next) ...
  • vue路由全面详解(下):路由守卫、缓存路由组件(终于要把路由的常用知识写完啦)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,611
精华内容 1,044
关键字:

路由守卫vue使用场景

友情链接: fskcodec.rar