由于路由组件的复用问题, 相同路由切换, 是不会出现动画效果的, 比如从 /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
, 直接绑在需要组件的根元素
上即可