vue-router钩子beforeRouteEnter函数获取到this实例

官方文档:

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当钩子执行前,组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}
export default {
    data(){
        return {
             num: 18
        }
    },
    beforeRouteEnter(to, from, next){
        next(vm=>{
            vm.num=19;
        })
    }
}

.

时间: 2024-12-24 07:33:37

vue-router钩子beforeRouteEnter函数获取到this实例的相关文章

Vue:router的beforeEach与afterEach钩子函数

在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子,两种函数1.全局钩子2.某个路由的钩子3.组件内钩子 两种函数: 1.Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/ 2.Vue.afterEach(function(to,form))/*在跳转之后判断*/ 全局钩子函数 顾名思义,它是对

Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... 前端进阶积累.公众号.GitHub Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法

vue router 参数获取

vue router 参数获取通常是通过$route.query和$route.params方法这里将这两种方式通过代码展示出来: 路由代码: import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import UserAdd from './components/UserAdd' import UserList from './components/UserList'

十、Vue Router 进阶-获取数据

获取数据的两种方式 导航完成之后获取数据:先完成导航,然后在接下来的组件生命周期钩子created中获取数据.在数据获取期间展示一个loading加载中的状态提示. 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航. 导航完成之后获取数据(可展示loading) 在组件的created钩子中获取数据.在获取数据期间展示一个loading状态,可以在不同视图间展示不同的loading状态. <template> <div class="post&

Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

Vue Router 路由守卫:完整的导航解析流程

完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). 5 在路由配置里调用 beforeEnter. 6 解析异步路由组件. 7 在被激活的组件里调用 beforeRouteEnter. 8 调用全局的 beforeResolve 守卫 (2.5+). 9 导航被确认. 10 调用全局的 afterEach 钩子. 11 触发 DOM 更新. 12 用

vue router 如何使用params query传参,以及有什么区别

写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 本文首发于我的个人blog:obkoro1.com Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/route

Vue系列:Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 1.动态路由 动态路由,可以将某种模式匹配到的所有路由,并全都映射到同个组件. (通俗点,比如根

一、Vue Router 的使用

什么是路由 路由是根据不同的url地址展示不同的内容或页面.可分为前端路由和后端路由. 后端路由:通过用户请求的url导航到具体的html页面:每跳转到不同的URL,都是重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据和模版组合,返回HTML,也可以是直接返回模版HTML,然后由前端再去请求数据,使用前端模版和数据进行组合,生成想要的HTML.(意味着,浏览器刷新页面.网速慢的话说不定屏幕全白再有新内容) 简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不