Vue->封装返回上一页方法

371 阅读1分钟

前言

特别是在移动端开发项目中会出现这样一个场景,在二级或者详情页的时候顶部导航或有出现一个返回上一页的按钮,该按钮的作用就是点击之后返回上一页或者历史页面,那么问题来了,是不是有很多个这样的页面或者很多个这样的图标我们都要手动去绑定一个方法,再写一遍同样的逻辑呢,本文章带你封装一个全局的返回上一页的方法

第一步

在main.js中将方法挂碍到原型链上

Vue.prototype.back = () => router.back(-1)

第二步

在需要使用返回上一页的事件中直接这样写

<div @click="back">返回上一页</div> 

说明

该back方法就是我们在全局通过vue原型链挂载的公用的方法,就不用每次去重新定义给一个事件写一遍放方法,显得太繁琐还不好维护。

转载:juejin.cn/post/684490…