【vue3】监听路由的写法以及路由更新但是页面内容不更新的解决方案

以下是vue3使用watch监听路由的写法

watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    
    
  	// 此处写监听路由后要执行的事情
    if(newValue.fullPath === '/manage/racking') {
    
    
      getList()
    }
  },
  {
    
     immediate: true }
)

注意：如果想通过监听路由变化的方式去刷新页面，解决路由更新页面不更新的问题，要把immediate: true去掉，不然就会进入回调地狱

因为：

• watch函数会在组件初始化时执行一次，设置immediate: true，watch函数会在路由发生变化时再次执行。
• router.go(0)是刷新当前页面，如果设置immediate: true，组件初始化时执行一次router.go(0)，路由发生变化时又执行router.go(0)，
• router.go(0)刷新页面会触发组件初始化，组件初始化又会触发watch函数执行router.go(0)，并且触发路由发生变化执行router.go(0)，如此反复，便造成了页面一直刷新的情况。
• 不设置immediate: true，watch函数只会在路由发生变化时执行router.go(0)，不会一直刷新页面。

watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    
    
    router.go(0)
  },
)