记录一下vue3 watch刷新父级页面

效果

图片:

父页面代码

import { watch } from 'vue'
export default defineComponent({
	name: 'Transfer',
    setup() {
    	const route = useRoute()
      	const state = reactive({
	        listLoading: false,
		})
	    //观察路由变化
	    //Transfer是我父路由实例名
		//fetchData()是父页面加载数据方法
      	//================================================
	    watch(
	      () => route.fullPath,
	      () => {
	        if (route.name === 'Transfer') {
	          fetchData()
	        }
	      }
	    )
      	//================================================
	    onMounted(() => {
	      fetchData()
	    })
	    return {
	      ...toRefs(state),
	    }
	},
})

子页面代码

import {
    defineComponent,
    toRefs,
  } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'

  export default defineComponent({
    name: 'TransferEdit',
    setup() {
      const store = useStore()
      const router = useRouter()
      const state = reactive({})
      const save = () => {
      	//操作完成
        goBack()
      }
      //返回指定页======================================
      const goBack = async () => {
        //删除当前标签页
        const detailPath = await handleActivePath(route, true)
        store.dispatch('tabs/delVisitedRoute', detailPath)
        //打开父标签
        await router.push('Transfer')
      }
      //返回指定页======================================
      return {
        ...toRefs(state),
        goBack,
      }
    },
  })

关键代码

父页面：

//观察路由变化
//Transfer是我父路由实例名
//fetchData()是父页面加载数据方法
watch(
  () => route.fullPath,
  () => {
    if (route.name === 'Transfer') {
      fetchData()
    }
  }
)

子页面:

const goBack = async () => {
  //删除当前标签页
  const detailPath = await handleActivePath(route, true)
  store.dispatch('tabs/delVisitedRoute', detailPath)
  //打开父标签
  await router.push('Transfer')
}

参考

参考地址：https://www.crazyming.com/note/2499/
如果对你有帮助，可以点个赞，谢谢！！！