我正在构建一个Vue应用程序并从NuxtJS开始 . NuxtJS有一个内置页面转换模块，因此添加页面转换很容易，但现在我想在单击特定按钮时显示不同的转换 .
所以：我正在路线'/ test'，当我点击菜单到'/ posts'时，它必须淡出，但是当我点击'/ test'路线内的按钮时，它应向左滑动，并且下一条路线也必须向左滑动 .
现在我只有这样的东西：
<template>
<div>
<section class="container">
<div class="content">
Testcomponent
{{transition}}
<button v-on:click="test">Posts!</button>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
transition: 'page',
title: 'default'
}
},
methods: {
test() {
this.transition = 'slide';
this.$router.push('/posts');
}
},
transition: {
enterClass:`${this.transition}-enter`,
enterToClass:`${this.transition}-enter-to`,
enterActiveClass:`${this.transition}-enter-active`,
leaveClass:`${this.transition}-enter`,
leaveToClass:`${this.transition}-enter-to`,
leaveActiveClass:`${this.transition}-enter-active`,
}
// transition: {
// beforeEnter(el){
// alert('testtest');
// console.log(el);
// // transition: 'fade'
// }
// }
// transition: {
// name: this.clicked ? 'slide' : 'page'
// }
}
</script>