Vue Router 路由跳转到同一个页面，页面不刷新问题

主要问题

vue 同一路由跳转不走生命周期，导致数据不更新
不管是动态路由还是传参，都不走

解决方案：1

// 使用 watch 监听路由变化，手动更新数据
watch: {
    '$route': function (to, from) {
        // 拿到目标参数 to.query.id 去再次请求数据接口
        this.onLoad(to.query.id);
    }
}

解决方案：2

<router-view :key="$route.fullPath"></router-view>
// 使用 router-view 时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略,
// 并不会刷新当前路由组件。即 mounted、beforeDestory 等钩子函数并不会触发。


// 如果想强制刷新，可以在根路由上为其分配一个唯一 key，采用 $route.fullpath 作为其唯一 key。
// 这样 vue 就回认为内部路由每个都是不同的路由，在跳转时便会强制刷新组件

`原理：`
通过 key，用 key 管理可复用的元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染
Vue 为你提供了一种方式来表达 “这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可