vue-router钩子beforeRouteEnter函数获取到this实例
2023-09-11 14:15:30 时间
官方文档:
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; }) } }
.
相关文章
- Vue_(组件)实例生命周期钩子
- VUE - 配置跨域
- vue文件在vs code中没有智能提示
- Vue双向数据绑定原理分析(转)
- vue生成路由实例, 使用单个vue文件模板生成路由
- Vue实例的生命周期(钩子函数)
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Code split by route in VueJS
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- thinkphp6:前后端分离使用表单令牌(php 8.1.1 / thinkphp v6.0.10LTS/vue 3.2.26)
- vue.js 3.2.6 解决swiper动态加载数据时默认显示最后一页(swiper@6.8.4)
- vue实例的方法
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- [FE] jsoneditor 在 vue-router 和 vue-ssr 渲染下出现两个实例的问题
- vue项目中sass全局引用变量 sass-resources-loader webpack配置
- vue.config.js 常用配置
- vue学习笔记
- vue 音乐App QQ音乐搜索列表最新接口跨域设置
- Vue项目打包部署Nginx配置及前端缓存问题解决
- Vue服务端渲染Nuxt.js实例
- Vue.nextTick和Vue.$nextTick
- vue、vuex、iview、vue-router报错集锦与爬坑记录
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- Vue、Vuejs从入门到精通 | vue-router详解
- 096:vue+openlayers使用canvas个性化圆形 (示例代码)
- 测试开发之Vue学习笔记-H5实例百度音乐
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(二)vue 指令及用法举例
- vue中Axios的封装和API接口的管理
- Vue: vue-router路由
- vue-element-admin整合.net core web api项目开发点滴记录
- 测试开发之Vue学习笔记-H5实例百度音乐