Question

我正在尝试通过Vue.js实现两个组件之间的转换。每个组件都有一个按钮（<router-link>），以转到另一个组件。每次，当A-> B时转换为“向右滑动”，而当B-> A时转换为“向左滑动”。不幸的是，它仅以一种方式进行，我已将其设置为默认方式（数据中的“右滑”）。不会从<router-link>的click事件中调用该方法，因为我尝试添加测试按钮来调用该函数，并且该方法有效。如何通过组件中<router-link>上的click事件调用方法？

这是我的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');

从组件内部的路由器链接中的click事件中调用方法（Vue.js）

0 个答案: