教學文章(參考 导航完成后获取数据):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
  }
}

這樣就可以解決我上面的問題了

不過可能不是最佳解