Vue 路由跳转相同路径页面（数据）不刷新（NavigationDuplicated: Avoided redundant navigation to current location: “xxx“）

场景：在 Vue 中实现导航栏搜索功能时，需要在点击搜索按钮后去往搜索页面，并展示相应的页面数据。虽然在第一次点击按钮后可以正常响应，但是在后几次点击按钮时页面（数据）就不再刷新了。

在出现上述场景的同时，浏览器也报了错误：

NavigationDuplicated: Avoided redundant navigation to current location: “xxxxxx”

查阅相关资料后，发现原因只是你重复发送了相同的路由路径，该错误对项目并没有影响，但若是你看着不舒心的话，也可以在项目的 router 文件夹下的index.js文件中添加如下代码：

// 获取原型对象上的push函数
const originalPush = Router.prototype.push
// 修改原型对象中的push方法
Router.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

这样就可以除去浏览器控制台的报错了。

重点： vue 同一路由跳转不走生命周期，导致数据不更新（不管是动态路由，还是传参)，所以页面数据并不会随着搜索关键词的改变而改变！

例如以下：因为获取数据的方法在 vue 的生命周期的钩子函数中，所以随着地址栏中的 keywords 的 value 值的改变，页面并不会发送新的请求去后端获取新的数据。

解决方案：

方案1：watch 监听

使用 watch 监听路由的变化，然后手动更新数据。代码如下：

watch: {
    $route(to, from) {
        // 判断跳转的路径是否你要监听的路径，我这里为 '/search'
        if (to.path == "/search") {
            // 通过路径获取新的 keywords 值
            let param = to.query.keywords;
            // 通过新的参数值获取新的数据
            this.getdata(param);
        }
    }
}

可以在控制台打印下 to 对象，查看一下相关属性：

方案2：改变 Vue 默认的缓存策略

  在 Vue 中使用 <router-view/> 时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件，所以生命周期钩子函数并不会触发。

  如果想强制刷新，可以在根路由（或App.vue）上为其分配一个唯一 key： $route.fullpath ， 这样 Vue 就会认为内部路由（传参）都是不同的路由，在跳转时便会强制刷新组件。不过，使用这种方法的弊端就是每次都相当于重新绘制页面，会消耗系统的性能。

  上述代码如下：<router-view :key="$route.fullPath"/>