vue-router在同一个路由下切换，取不到变化的路由参数

最近用vue写项目的时候碰到一个问题，在同一个页面下跳转，路由地址不变，路由参数有变化，一开始只是在data里取路由的参数，发现根本取不到变化的路由参数。

例如：订单列表也跳转详情页，跳转方法如下

<router-link :to="{path: '/orderDetail', query: {orderId: scope.row.orderId}}">
                            <el-button type="success" size="small">详情</el-button>
                        </router-link>

第一个跳转没问题，但是返回列表以后，在进入其他的详情页，顶部url的值变化了，但是在详情页中

this.routerId = this.$route.query.orderId;

这样打印出来值是不发生变化的。

解决方案如下：

数据初始化是这样的（不变）

 /**
        * 数据初始化
        */
        initDate() {
            this.routerId = this.$route.query.orderId;
            

加一段代码

watch: {
        '$route' (to, from) {
            this.initDate();
        }
    },

这样就能解决了