Nuxt将vue转html,Vue Nuxt - 按钮单击时的不同页面转换

我正在构建一个Vue应用程序并从NuxtJS开始 . NuxtJS有一个内置页面转换模块，因此添加页面转换很容易，但现在我想在单击特定按钮时显示不同的转换 .

所以：我正在路线'/ test'，当我点击菜单到'/ posts'时，它必须淡出，但是当我点击'/ test'路线内的按钮时，它应向左滑动，并且下一条路线也必须向左滑动 .

现在我只有这样的东西：

Testcomponent

{{transition}}

Posts!

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'

// }

}