现在通过监听$route可以实现当点击不同router-link时，router-view展示的组件切换可以有过渡效果。那么反过来，可以用vue-router实现当左右滑动不同组件时实现router-link的变化吗？用swiper结合动态组件虽然可以实现左右滑动slides切换带来tabs的变化，但是用不到vue-router。cude-ui太繁琐。所以单纯的用vue-router有什么解决方案吗？

<template>
    <div id="app">
        <div class="nav-tab" ref="tab">
            <router-link class="tab-item" active-class="active" to="/">商品</router-link>
            <router-link class="tab-item" active-class="active" to="/grade">评价</router-link>
            <router-link class="tab-item" active-class="active" to="/seller">商家</router-link>
            <div class="nav-line" ref="line"></div>
        </div>
        <transition :name="transitionName">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </transition>


    </div>
</template>


<script type="text/javascript">
export default {
    data() {
        return {    
            transitionName: "slide-left",
            routerDepth: ["products", "grade", "seller"],

        };
    },
    ...
    watch: {
        $route(to, from) {
            let toDepth = to.path.split("/")[1];
            let fromDepth = from.path.split("/")[1];
            let toIndex = this.routerDepth.indexOf(toDepth);
            let fromIndex = this.routerDepth.indexOf(fromDepth);
            this.transitionName =
                toIndex < fromIndex ? "slide-right" : "slide-left";
            if (toIndex === 1) {
                this.$refs.line.style.transform = "translate3d(100%,0,0)";
            } else if (toIndex === 2) {
                this.$refs.line.style.transform = "translate3d(200%,0,0)";
            } else {
                this.$refs.line.style.transform = "translate3d(0,0,0)";
            }
        }
    }
};
</script>

<style lang="scss" scoped>
/* 路由切换动画 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
    transition: all 0.3s ease;
}
.slide-left-enter,
.slide-left-leave-active,
.slide-right-enter,
.slide-left-leave-active {
    opacity: 0;
}
.slide-left-leave-active,
.slide-right-enter {
    transform: translate3d(-100%, 0, 0);
}
.slide-left-enter,
.slide-right-leave-active {
    transform: translate3d(100%, 0, 0);
}
.nav-tab {
    font-size: 0;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    position: relative;
    border-bottom: 1px solid $vborder;
    .nav-line {
        transition: all 0.3s ease;
        transform: translate3d(0, 0, 0);
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 33.33333333333%;
        height: 1px;
        background-color: rgb(240, 20, 20);
    }
    .tab-item {
        display: inline-block;
        width: 33.33333333333%;
        text-align: center;
        text-decoration: none;
        color: rgb(77, 85, 93);
        font-size: 14px;
        &.active {
            color: rgb(240, 20, 20);
        }
    }
}

</style>