vue2 如何让同名路由切换时, transition 起作用?

Question

Answer 1

由于路由组件的复用问题, 相同路由切换, 是不会出现动画效果的, 比如从 /article/1 切换到 /article/2

vue1 可以用路由钩子canReuse来取消组件的复用, 然后 vue2 已经取消了这个钩子, 那么 vue2 就没办法做到了吗?

其实 vue2 要做到其实也很简单

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

我们先通过计算属性, 生成一个 key, 这个 key 必须保证每一个 url 都不一样, 所以我们直接通过$route.path来生成, 有了这个唯一的 key 之后, 我们给router-view绑上即可.

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

不过上面的方法似乎太暴力了, 会作用到所有的页面, 如果只是想让部分页面起作用, 那么就不要将 key 绑定到router-view, 直接绑在需要组件的根元素上即可

热门文章