Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能。每个守卫接受三个参数

to: Route: 即将要进入的目标路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

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

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved。

Test1:

<template>
  <div>
    test1
    <el-button @click="test2">跳转</el-button>
  </div>
</template>

<script>
  export default {
    name: "Test1",
    methods: {
      test2() {
        this.$router.push({name: "test2", query:{type: false}})
      }
    },
    beforeRouteEnter(to, from, next) {
      console.log("****************Test1****Enter**************");
      console.log(‘to‘, to);
      console.log(‘from‘, from);
      console.log(‘next‘, next);
      next(vm => {
        //因为当钩子执行前,组件实例还没被创建
        // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
        console.log(vm);//当前组件的实例
      });
    },
    beforeRouteUpdate(to, from, next) {
      //在当前路由改变,但是该组件被复用时调用
      //对于一个带有动态参数的路径 /good/:id,在 /good/1 和 /good/2 之间跳转的时候,
      // 由于会渲染同样的good组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
      console.log("****************Test1*******Update***********");
      console.log(this, ‘Update‘); //当前组件实例
      console.log(‘to‘, to);
      console.log(‘from‘, from);
      console.log(‘next‘, next);
      next();
    },
    beforeRouteLeave(to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
      console.log("****************Test1****Leave**************");
      console.log(this, ‘Leave‘); //当前组件实例
      console.log(‘to‘, to);
      console.log(‘from‘, from);
      console.log(‘next‘, next);
      next();
    }
  }
</script>

<style scoped>

</style>

Test2:

<template>
  <div>
    test2
  </div>
</template>

<script>
  export default {
    name: "Test2",
    beforeRouteEnter(to, from, next) {
      console.log("****************Test2*********Enter*********");
      console.log(this, ‘beforeRouteEnter‘); // undefined
      console.log(‘to‘, to);
      console.log(‘from‘, from);
      console.log(‘next‘, next);
      next(vm => {
        //因为当钩子执行前,组件实例还没被创建
        // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
        console.log(vm);//当前组件的实例
      });
    },
    beforeRouteUpdate(to, from, next) {
      //在当前路由改变,但是该组件被复用时调用
      //对于一个带有动态参数的路径 /good/:id,在 /good/1 和 /good/2 之间跳转的时候,
      // 由于会渲染同样的good组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
      console.log("****************Test2*********Update*********");
      console.log(this, ‘beforeRouteUpdate‘); //当前组件实例
      console.log(‘to‘, to);
      console.log(‘from‘, from);
      console.log(‘next‘, next);
      next();
    },
    beforeRouteLeave(to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
      console.log("****************Test2*********Leave*********");
      console.log(this, ‘beforeRouteLeave‘); //当前组件实例
      console.log(‘to‘, to);
      console.log(‘from‘, from);
      console.log(‘next‘, next);
      next();
    }
  }
</script>

<style scoped>

</style>

首先是第一次进入Test1

可以看出当作为首页进入的时候,beforeRouteEnter方法中
??????

  1. to显示的是当前路由,
  2. from显示name为null,path是"/"

当离开Test1页面进入Test2页面时 将先调用Test1页面中的beforeRouteLeave方法,再调用Test2中的beforeRouteEnter方法

beforeRouteLeave中

  • to显示的就是去往的路由test2有参数传递
  • from显示的是正要离开的路由test1

beforeRouteEnter中

  • to里面显示的就是本页面test2并且有参数传递
  • from显示的是上一个页面test1

当离开Test2返回Test1页面时,先调用Test2页面中的beforeRouteLeave方法,再调用Test1中的beforeRouteEnter方法

beforeRouteLeave中

  • to显示的是要去的路由test1
  • from显示的是即将离开的路由test2并且有 参数传递

beforeRouteEnter中

to显示的是本页面test1
from中显示的是上一页面test2有参数传递
由此我们可以总结出

  • to: Route: 即将要进入的目标路由对象
  • from: Route: 当前导航正要离开的路由

这是两个参数的本意 ,我们可以这么理解

当beforeRouteEnter方法时:to可以理解为当前页面,from为来自哪个页面,如果是首页则name为null,path为"/"

当beforeRouteLeave方法时:两个参数的意思可以跟官网意义相同

原文地址:https://www.cnblogs.com/zouwangblog/p/10984060.html

时间: 2024-11-08 15:47:00

Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解的相关文章

vue导航守卫

三部分 router(VueRouter实例)守卫 -- 全局路由守卫 router守卫 -- 路由守卫 component守卫 -- 组件守卫 const router = new Router({}) router.beforeEach(function (to,from,next) {} // export default router router.beforeEach(function (to,from,next) { // console.log(to,from) if(to.nam

vue导航守卫和axios拦截器的区别

在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... }) router.beforeEach(

vue 导航守卫,验证是否登录

路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面. router.beforeEach((to, from, next) => { const nextRoute = [ 'api', 'my/index, 'course']; if(nextRoute.indexOf(to.name) >= 0){ //可以在这里面判断是否登录了 if (!store.state.auth.IsLogin) { vueRouter.push({name: 'logi

vue.js学习之组件数据流详解

本文和大家分享的主要是vue.js组件数据流相关内容,一起来看看吧,希望对大家学习vue.js有所帮助. 一.组件 组件,可以说是现代前端框架中必不可少的组成部分.使用组件,不仅能极大地提高代码的复用率和开发者的开发效率,对于代码后期的维护也有着非常重要的意义.前端开发,由于历史遗留原因,WebComponent 虽然好用,但其发展情况却受到极大地限制,和很多新兴的前端技术一样,可望而不可即.基于这样的情况,聪明的开发者们尝试通过框架内部集成相应的功能来完成组件化,各种现代前端框架基本上都有各自

vue 2.0 路由创建的详解过程

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script src="vue221.js"></script> 8 <script src="vue-router231.js&qu

vue.js 学习之模板语法详解

本文和大家分享的主要是vue.js 的模板语法,希望对大家学习vue.js有所帮助,一起来看看吧. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 如果你熟悉虚拟 D

Vue.js中学习使用Vuex详解

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取.进行修改,并且你的修改可以得到全局的响应变更.下面咱们一步一步地剖析下vuex的使用:首先要安装.使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex : npm install vuex --save 然后 在src文件目录下新建一个名为store的文件

vue cli4.0 快速搭建项目详解

搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装vue cli? 剧场环境已搭建好,开始表演! 1.进入一个目录,创建项目 对应命令: vue create project-one 2.我们这里选择手动配置 按 ↓ 选择“Manually select features”,再按 Enter 3.选择你需要的配置项 通过↑ ↓ 箭头选择你要配置的项,

vue中ref在input中详解

当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model="inputval"> </template> export default { data(){ return { inputval:'', } }, watch:{ inputval(){ console.log(this.inputval) } } } 2.ref自定义一个方