关于vue.js:Vue项目中对于返回按钮的封装以及回退的实现

返回按钮状态⾃动判断:history.length是不牢靠的,它既蕴含了vue app路由记录,也包含其余 ⻚⾯的。能够增加⼀个⾃定义的历史记录治理栈,创立./utils/history.js

const History = {
 _history: [], // 历史记录堆栈
 install(Vue) {
 // vue插件要求的装置⽅法
 Object.defineProperty(Vue.prototype, "$routerHistory", {
 get() {
 return History;
 }
 });
 },
 push(path) {
 // ⼊栈
 this._current += 1;
 this._history.push(path);
 },
 pop() {
 // 出栈
 this._current -= 1;
 return this._history.pop();
 },
 canBack() {
 return this._history.length > 1;
}
};
export default History;

router.js中引⼊,增加⼀个后退⽅法并监听afterEach从⽽治理记录

import History from "./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.vue

<i v-if="$routerHistory.canBack()"></i>
methods: {
 back() {this.$router.goBack();}
}

后退动画,App.vue

<transition :name="transitionName">
 <router-view class="child-view"/>
</transition>

data() {
 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: transform 0.3s;
}

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据