vue.js - Vue动态路由匹配，过渡效果如何做

问题描述

问 题

由于动态路由匹配都渲染了同个组件，并未销毁再重建。
这种情况下，过渡效果如何做？

如：

routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id’, component: User }
]

从/user/foo 到 /user/bar 的过渡效果要用什么方法做呢，查看官方文档，没有找到类似的例子

解决方案

<transition name="fade" mode="out-in">
    <router-view class="router" :key="key"></router-view>
</transition>

export default {
    computed: {
        key() {
            return this.$route.path.replace(/\//g, '_')
        }
    }
}

通过计算属性, 生成一个 key, 这个 key 必须保证每一个 url 都不一样，给router-view绑上即可.

参考 https://www.mmxiaowu.com/arti...

这篇关于vue.js - Vue动态路由匹配，过渡效果如何做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！