Я пытаюсь добиться с помощью Vue.js перехода между двумя компонентами. Каждый компонент имеет кнопку (<router-link>
) для перехода к другому компоненту.
Каждый раз переход меняется на «слайд-вправо», когда A-> B, на «слайд-левый», когда B-> A.
К сожалению, это происходит только одним способом, который я установил по умолчанию («слайд-право» в данных).
Метод не вызывается из события click на <router-link>
, потому что я попытался добавить кнопку test для вызова функции, и это сработало.
Как я могу вызвать метод из события щелчка на <router-link>
в компоненте?
Вот мой HTML-файл:
<div id="app">
<transition :name="direction">
<router-view />
</transition>
</div>
<script type="text/x-template" id="B">
<section style="position:absolute; width: 100%;height: 100%;">
(some text)
<a>
(Some svg icon)
<router-link v-on:click.native="changeDirection" to="/">Back to A</router-link>
</a>
</section>
(Same x-template component for A with a button to change to B)
мой CSS:
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active{
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-left-enter {
transform: translateX(100%);
}
.slide-left-leave-to {
transform: translateX(-100%);
}
.slide-right-enter {
transform: translateX(-100%);
}
.slide-right-leave-to {
transform: translateX(100%);
}
и мой JS:
const A = {
template: '#A',
};
const B = {
template: '#B',
};
Vue.component('A', {
template: '#A'
})
Vue.component('B', {
template: '#B'
})
const routes = [
{ path: '', component: A },
{ path: '/Proprietaire', component: B }
]
const router = new VueRouter({
routes
});
new Vue({
data: {
direction: 'slide-right'
},
methods: {
changeDirection: function(event){
if(this.direction === 'slide-right')
this.direction = 'slide-left';
else if(this.direction === 'slide-left')
this.direction = 'slide-right'
}
},
router
}).$mount('#app');