[学习笔记] Vue router监听-解决router-push到相同component需重新渲染问题

教学文章(参考 导航完成后获取数据):https://router.vuejs.org/zh/guide/advanced/data-fetching.html#%E5%AF%BC%E8%88%AA%E5%AE%8C%E6%88%90%E5%90%8E%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE

我的情境是我写了一个进阶搜寻的componentA导页到另一个componentB在mounted时call api获取数据渲染
但是componentA嵌入在componentB

componentB.vue

<template> <div>  <search-bar></search-bar> </div><template>export default {  name: "componentB",  components: {    "search-bar": componentA  }}

我自己是做透过url传递查询条件，所以发生了当我在componentB页面使用componentA传递搜寻条件后又导页到componentB(变成我都在同一页，不过mounted并不会再重新执行)

所以需在componentB补上**watch**(如下)

componentB.vue

<template> <div>  <search-bar></search-bar> </div><template>export default {  name: "componentB",  components: {    "search-bar": componentA  },  methods:{      mountedApi(){          // 重新call api      }  },  watch: {    // 监听路由变化，如果有变化会再次执行该方法    $route: "mountedApi"     // mountedApi为function name  }}

这样就可以解决我上面的问题了

不过可能不是最佳解