vue路由点击同一个路由连接（路由地址不变），刷新对应组件？

Question

通常点击一个路由连接，会渲染对应的组件。

但项目中通常需要通过点击路由刷新组件，比如，通过点击菜单，渲染数据列表组件，但想通过点击路由刷新列表数据。

vue-router在路由不变的情况下不会重新渲染组件。有什么办法可以强制刷新组件

我所知道的一个方法是在路由连接上添加 @click.native="flush" 然后执行$router.go(0)，但这样会刷新所有组件，不会对应刷新列表组件

有什么办法可以只刷新对应的组件？请大神们赐教

<router-link to="/list">列表</router-link>
<router-view></router-view>

router配置:
path:"/list",component:List

第一次点击列表：渲染出List组件
第二次点击列表：路由不变，List组件不刷新

目的：第二次点击的时候刷新List组件

Answer 1

参考：https://segmentfault.com/a/11...

通过不断改变url的query来触发view的变化。我们监听侧边栏每个link 的 click事件，每次点击都给router push 一个不一样的query 来确保会重新刷新view。

Answer 2

可以借助 EventBus 和 watch来实现，写了一个大概的示例，你可以试试，希望能帮到你

<template>
  <router-link to="/list" @click.native="test"></router-link>  
</template>
<script>
export default {
  methods: {
    test() { // 点击路由时
      var bus = new Vue()
      bus.$emit('list', {
        data: {},
      })
    }
  }
}
</script>

<template>
  <div class="list"></div>
</template>
<script>
export default {
  created() {
    const bus = new Vue()
    bus.$on('list', (data) => { // 监听点击路由时
      console.log(data)
    })
  },
  methods: {
    reset() {
      // reset
    },
  },
  watch: {
    '$route': 'reset', // 切换路由时
  },
}
</script>

Answer 3

通过数据控制需要刷新的ui范围
比如把数据再重新赋值一次给自身

Answer 4

你好 解决了吗 终于碰到了个一样的问题了