vue后台管理系统切换页面动画 <transition name="fade-transform" mode="out-in"> <router-view></router-view> </transition>在公共样式中添加// global transition css /* fade */ .fade-enter-active, .fade-leave-active { transition: opacity 0.28s; } .fade-enter, .fade-leave-active { opacity: 0; } /* fade-transform */ .fade-transform-leave-active, .fade-transform-enter-active { transition: all .5s; } .fade-transform-enter { opacity: 0; transform: translateX(-30px); } .fade-transform-leave-to { opacity: 0; transform: translateX(30px); } /* breadcrumb transition */ .breadcrumb-enter-active, .breadcrumb-leave-active { transition: all .5s; } .breadcrumb-enter, .breadcrumb-leave-active { opacity: 0; transform: translateX(20px); } .breadcrumb-move { transition: all .5s; } .breadcrumb-leave-active { position: absolute; }

vue 中如何对局部组件强制刷新 1.使用this.$forceUpdate强制重新渲染 如果要在组件内部中进行强制刷新，则可以调用this.$forceUpdate()强制重新渲染组件，从而达到更新目的<template> <button @click="refresh()">Refresh当前组件</button> </template> <script> export default { name: 'compoment', methods: { refresh() { this.$forceUpdate() } } } </script> 2.使用v-if指令 如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的<template> <comp v-if="refresh"></comp> <button @click="refreshComp()">刷新comp组件</button> </template> <script> import comp from '@/views/comp.vue' export default { name: 'parentComp', data() { return { refresh: true } }, methods: { refreshComp() { // 移除组件 this.refresh = false // 在组件移除后，重新渲染组件 // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。 this.$nextTick(() => { this.refresh = true }) } } } </script>