beforeRouteEnter，beforeRouteLeave函数

操作：
是时机函数，在页面加载前，可以在这两个函数里面做一些事情，
比如发送异步请求。
类似过滤器，或者拦截器。

1. axios安装

安装报错，多装几遍，或者用cnpm安装

npm install axios -s
npm install --save vue-axios

2. 参数说明

// 两个钩子函数 过滤器 || 拦截器的环绕
// to 路由将要跳转的路径信息
// from 路径跳转前的路径信息
// next 路由的控制参数
// next() 跳入下一个页面
// next('/path') 改变路由的跳转方向，跳到下一个页面
// next(false) 返回原来的页面
// next((vm) => {}) 尽在beforeRouteEnter 中可用，vm是组件实例
beforeRouteEnter: (to, from, next) => {console.log('进入路由之前');next() // 必写
},
beforeRouteLeave: (to, from, next) => {console.log('进入路由之后')next()
}

3. demo

<template><div>{{ info[1].hobby[0] }}{{ info[0].home }}</div>
</template><script>export default {beforeRouteEnter: (to, from, next) => {console.log('进入路由前..')next((vm => {vm.getData()})) // 发送异步请求并放行},beforeRouteLeave: (to, from, next) => {console.log('进入路由后..')next()},data() {return ({info: [{name: null,home: null},{hobby: [null, null]}]})},methods: {getData: function() {/* ../../static/mock/data.json */this.axios.get('../../static/mock/data.json').then(response => (this.info = response.data))}}}
</script><style scoped></style>

beforeRouteEnter，beforeRouteLeave函数相关推荐

vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
ts写法vue组件内守卫beforeRouteLeave不生效问题
解决办法需要加上下面一行代码 Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate' ...
Typescript，Vue you enjoy it ?
前言听说typescript最近越来越流行,借着开启新项目,用vue + typescript尝试了下.夏日炎炎,趁着乘凉的略微时间,进行一下项目总结,望大佬们多多指点! 项目配置初始化 vue- ...
vs code vue插件_干货分享 | Vue框架常见问题浅谈
友情提示:全文7800多文字,预计阅读时间10分钟 Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...
vue组件的生命周期和执行过程
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
Vue缓存路由（keep-alive）以及新的生命周期
一.概念也就是说,kee-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 .也就是所谓的组件缓存 keep-alive 是 Vue 的内置组件,当它包裹动态组 ...
web前端项目实战_vue项目仿美团【爱创课堂】
目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...
vue面试题、react面试题大全、ES6等....
自己整理的一些面试题: 1.promise是用来做什么的? 答:它是一个对象,用来传递异步操作的信息. 2.promise三个状态? Pending:进行中,Resolved:已完成,Reject:已 ...
Vue全家桶系列之Vue-router(五)
文章目录 1.前言 2.路由过渡效果 3.编程式的导航 4.导航守卫 4.1 全局守卫 4.2 路由独享的守卫 4.3组件内的守卫 4.4导航解析流程 1.前言上篇文章说了vue-router的路由 ...

beforeRouteEnter，beforeRouteLeave函数

1. axios安装

2. 参数说明

3. demo

beforeRouteEnter，beforeRouteLeave函数相关推荐

最新文章

热门文章