Vue3 script setup组合式API如何监听路由变化获取路由meta信息？

实现步骤 #

1. 首先通过 useRoute 组合式API获取响应式的当前路由实例，替换原来监听$route的选项式写法
2. 使用 Vue 提供的 watch 直接监听路由的 meta.showExtra 属性，配置immediate: true保证组件初始化时就执行一次判断，和之前的效果完全一致

完整代码实现 #

<template>
  <div>
    This will always be visible. Also here's a number: {{ number }}
  </div>

  <div v-if="showExtra">
    This will be hidden in some routes.
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
import { useRoute } from "vue-router"

const number = 5
const showExtra = ref(true)
const route = useRoute()

watch(
  // 直接监听需要的属性，性能更优，无需额外配置deep
  () => route.meta?.showExtra,
  (newVal) => {
    showExtra.value = !!newVal
  },
  // 初始化立即执行，对应原来的immediate: true配置
  { immediate: true }
)
</script>

TypeScript 类型优化（可选） #

如果需要给路由meta字段增加全局类型约束，避免TS类型警告，可以在项目的类型声明文件（比如env.d.ts或vite-env.d.ts）中扩展vue-router的RouteMeta类型：

declare module 'vue-router' {
  interface RouteMeta {
    // 在这里定义你所有meta字段的类型
    showExtra?: boolean
  }
}

原onBeforeRouteUpdate方案不生效的原因 #

onBeforeRouteUpdate钩子仅在当前路由绑定的组件被复用（比如同一路由仅参数变化）时才会触发，如果你的组件是全局布局类组件，或者跨路由切换时组件会重新渲染，这个钩子不会执行，因此直接监听响应式路由实例是更通用的解决方案。

内容的提问来源于stack exchange，提问作者theberzi