Vue动态路由匹配，过渡效果如何做

Question

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

如：

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

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

Answer 1

<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...

Answer 2

这里 https://router.vuejs.org/zh-c...

Answer 3

组件没有销毁或者隐藏的话就没办法用过渡.

Answer 4

一样的做法，包着路由就好了

https://router.vuejs.org/zh-cn/advanced/transitions.html

Answer 5

LZ有没有解决啊.我也遇到这个问题,做不出动态效果

Answer 6

由于你这是切换路由，复用同一个组件，所有其他组件生命周期的钩子函数无法触发，可以根据不同的路由，创建不同的transitionName，从而有各自的过渡效果。

const User= {
  data () {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    '$route' (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  },
  template: `
   <transition :name="transitionName">
    <div class="user">
      <h2>User</h2>   
    </div>
   </transition>
  `
}

Answer 7

最近遇到了这个问题，因为切换路由时候是复用组件的，并没有销毁或隐藏，是不会触发过渡效果，其中一个办法是监听路由变化来加上动画。
最简单的办法就是给你的组件绑定key值。

const User= {
  computed: {
        key() {
            ......
        }
   },
  template: `
   <div :key="key">...</div>
  `
}

不过这样就没办法复用组件了。