美文网首页
Vue-router 钩子函数

Vue-router 钩子函数

作者: zZ_d205 | 来源:发表于2021-04-28 12:06 被阅读0次

路由配置文件中的钩子函数

beforeEnter

beforeEnter 有三个参数:

to: 路由将要跳转的路径信息,信息是包含在对像里边的。

from: 路径跳转前的路径信息,也是一个对象的形式。

next: 路由的控制参数,常用的有next(true)和next(false)。

在路由配置文件(/src/router/index.js)中写钩子函数

image

在控制台查看打印内容

image

写在模板中的钩子函数

beforeRouteEnter

在路由进入前的钩子函数

不!能!获取组件实例 this

因为组件实例还没被创建

beforeRouteUpdate

当前路由改变,该组件被复用时

对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

可以访问组件实例 this

beforeRouteLeave

在路由离开前的钩子函数

可以访问组件实例 this

模板中写钩子函数

image

在控制台查看打印内容

进入模板前

image

离开模板前

image

作者:Rising_life
链接:https://www.jianshu.com/p/d1bd564de3dd
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章

  • 2021-04-11

    vue-router 路由钩子函数(导航守卫) 路由钩子函数有三种: 全局钩子: beforeEach(全局前置守...

  • vue-router方法的记录

    记录一下vue-router中的路由钩子函数的基本用法 路由钩子函数分为三种类型如下: 第一种:全局钩子函数。 r...

  • Vue-Router面试题

    一、vue-router有几种钩子函数?具体是什么及其参数 1、全局路由。(全局导航钩子主要有两种钩子:前置守...

  • vue-router 在每个路由进入前添加参数

    在vue-router的钩子函数beforeEach函数中有三个参数to,from,next,因为不能直接操...

  • Vue-router钩子beforeEach应用

    本章概述 vue-router提供了三个钩子函数,beforeEach,beforeResolve,aft...

  • vue-router路由守卫

    vue-router导航钩子 vue-router导航钩子的主要作用是拦截导航,让路由完成跳转或者取消; 导航钩子...

  • vue-router

    vue-router 有哪些钩子函数? 全局前置守卫 router.beforeEach 全局解析守卫 route...

  • 面试题

    vuex工作流程 vue-router导航守卫(钩子函数) 概念:导航发生变化时,导航钩子主要用来拦截导航,让它完...

  • Vue-router 钩子函数

    路由配置文件中的钩子函数 beforeEnter beforeEnter 有三个参数: to: 路由将要跳转的路径...

  • Vue-router 钩子函数

    路由配置文件中的钩子函数 beforeEnter beforeEnter 有三个参数: to: 路由将要跳转的路径...

网友评论

      本文标题:Vue-router 钩子函数

      本文链接:https://www.haomeiwen.com/subject/klhvrltx.html