猫不理的锅包肉

我做vue项目的时候踩了不少的坑，今天就开始一个一个都复盘一下。
不仅为了知识的巩固，也希望能帮遇到同样问题的小伙伴。
好，废话不多说直接进入正题！！

最近开发vue博客系统时遇到了一个的问题，就是同路由不同参数页面不会刷新的问题。
当时遇到这个问题的场景是，文章详情界面嘛。
也就是看文章的页面，有一个上一篇文章，下一篇文章的功能，如下图。

这边的逻辑就是@click触发函数传参路由跳转。

        jump(aid) {
            this.$router.push({
                path: `/article/${aid}`
            });
        },

可是问题就来了，地址栏的路由跳转了，可是页面数据没有发生变化。
这个其实不是什么大事，于是我选择了直接watch监听$route,如果路由改变就获取下数据不就行了。

        $route: function(to, form) {
            //这部分是获取数据的函数，直接调用一下就行
        }

当然这种方法是可行的也没啥太大问题，数据也按照预期刷新了。
但是呢，过渡动画消失了。路由动画没有了这是绝对不能行的。咚的一下就刷新了，非常生硬，很丑不喜欢。
于是我就开始查google，翻文档。首先找的一种解决方案是
设置一个中间路由但是这个让我给否决的掉了，我觉得太麻烦。
之后我又去翻文档，突然在key这一部分看到如下内容

这个不就是我想要的么。于是。。。

<div id="Article" :key="$route.fullPath">
//这个是组件根节点标签

$route: function(to, form) {
    this.getArticleData(this.$route.params.id);
}
//这个是组件中的监听

我心爱的过渡动画又回来了。这里我研究了一下发现还有另一种写法。

<router-view :key="$route.fullPath" />
//直接改变的router-view key也可以达到同样的效果，如果是这种写法监听都不需要重新获取数据。    

但是我推荐大家第一种写法，多几行代码而已。我两种都尝试过后，我总感觉直接修改router-view的key值会有性能上的损耗。如果有大佬可以给我解惑欢迎留言不胜感激。