cachedViews: [] // 缓存组件
};
},
components: {},
created() {},
watch: {
$route(to, from) {
if (to.meta.keepAlive && !this.cachedViews.includes(to.name)) {
// 将需要缓存的组件信息, 添加进其中, 其中to.name的值应该和匹配组件的name选项一致
this.cachedViews.push(to.name);
}
//如果to索引大于from索引,判断为前进状态,反之则为后退状态
if (to.meta.index > from.meta.index) {
//设置动画名称
this.transitionName = "slide-left";
} else {
this.transitionName = "slide-right";
}
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 0.5s;
<!--
这个是必须的, 是为了让页面脱离文档流, 不然的话, 后进入的页面会从页面底部出来
这个定位会直接添加到路由匹配的组件根元素上, 所以页面根组件最好设定其宽度为100vw
-->
width: 100vw;
position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
</style>
待解决问题
子路由问题
子路由还没有考虑到
缓存组件问题
使用上述方式, 缓存组件需要注意组件的name选项要和路由的name选项一致, 容易疏忽填写组件的name选项问题
