vue 多个路由对应同一组件多次调用，页面未刷新问题

问题现象：

有三个菜单，只是参数不同，但使用的同一个组件页面，配置路由时指向了不同三个路由。但切换菜单时，页面不再刷新。

查了些资料，整理解决方案如下，欢迎纠错补充~

页面不刷新的原因：

响应路由参数的变化 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象。 https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

代码如下： 路由配置：

{ name: 'main', redirect: 'a1', path: '/main', component: Main, children: [ { name: 'a_1', path: '/a_1', component: AssetList }, { name: 'b_1', path: '/b_1', component: AssetList } ] }

Main.vue：

<template> <router-view ></router-view> </template>

Main.vue中的AssetList.vue 的内容未刷新：

就官网提供了两种方案：

方案一：

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

试了一下，在想要复用的那个组件里，监听$route，然后将这个页面要刷新的数据统一写个reload()方法，重新加载即可。 AssetList.vue：

export default { mounted () { this.reload() }, methods: { reload () {} }, watch: { '$route' (to, from) { console.log('to=' + to) this.reload() } } }

方案二：

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

使用方式略不同，但思路和方案一的监听路由同理。 在AssetList.vue中的watch位置处写beforeRouteUpdate监听，但并未进这个监听方法。 使用beforeRouteUpdate方式时，应写到外层的Main.vue中去监听路由变化才有效果。

Main.vue：

<template> <router-view ></router-view> </template> export default { beforeRouteUpdate (to, from, next) { console.log('routeUpdate：to=' + to.fullPath + ';from=' + from.fullPath) next() } }

方案三：

根据https://forum.vuejs.org/t/topic/54984/4 这里这位大神回答的方式，试了一下，的确有用。 在**Main.vue：**中的router-view 增加key，即可： <router-view :key="$route.fullPath"></router-view>

而且，这个方案是将整个组件都重新加载了。由于我这个组件里现在还有加载弹框数据，用这种方式，弹框数据也一并重新发送了一次请求。而，使用前两种方案，只是加载reload() 中数据而让页面数据变化以实现刷新想过，但组件其实并为重新被加载。

不顾这种方式会有什么弊端，暂不知，欢迎指导~