Vue项目中返回按钮的封装和回滚的实现

自动判断后退按钮的状态：history.length是不可靠的，它既包括vueapp路由记录，也包括其他页面。可以添加自定义的历史管理栈，创建./utils/history.jsconstHistory={_history:[],//historystackinstall(Vue){//vue插件需要的安装方法Object.defineProperty(Vue.原型,"$routerHistory",{get(){returnHistory;}});},push(path){//推送this._current+=1;这个._history.push（路径）；},pop(){//弹出this._current-=1;返回this._history.pop();},canBack(){returnthis._history.length>1;}};exportdefaultHistory;router.js中引入，添加一个back方法并监听afterEach来管理记录importHistoryfrom"./utils/history";Vue.use(History);Router.prototype.goBack=function(){this.isBack=true;this.back();};router.afterEach((to,from)=>{if(router.isBack){History.pop();router.isBack=false;router.transitionName="route-back";}else{History.push(to.path);router.transitionName="route-forward";}});使用，Header.vuemethods:{back(){this.$router.goBack();}}返回动画，App.vuedata(){return{transitionName:'route-forward'};},watch:{$route(){//动态设置动画?式this.transitionName=this.$router.transitionName}},/*??滑动画*//*＊场前*/.route-forward-enter{transform:translate3d(-100%,0,0);}.route-back-enter{transform:translate3d(100%,0,0);}/*出场后*/.route-forward-leave-to{transform:translate3d(100%,0,0);}.route-back-leave-to{transform:translate3d(-100%,0,0);}.route-forward-enter-active,.route-forward-leave-active,.route-back-enter-active,.route-back-leave-active{transition:transform0.3s;}