如何在Nuxt 3中监听路由变化？附Nuxt 2实现示例

在Nuxt 3中，你可以通过以下几种方式实现路由变化监听，适配Vue 3的Composition API特性：

1. 使用useRoute配合watch监听（最贴近Nuxt 2的写法） #

通过Vue Router提供的useRoute获取当前路由实例，再用Vue的watch监听路由变化：

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 监听路由实例变化
watch(route, (to, from) => {
  console.log('route change to', to)
  console.log('route change from', from)
}, { deep: true }) // 若需要监听路由参数的深层变化，添加deep配置
</script>

2. 使用路由钩子onBeforeRouteUpdate #

如果需要在路由更新前执行逻辑，可以使用Vue Router的onBeforeRouteUpdate钩子：

<script setup>
import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate((to, from) => {
  console.log('route will update to', to)
  console.log('route update from', from)
})
</script>

3. 兼容选项式API写法（不推荐，更适合Composition API） #

如果你习惯Nuxt 2的选项式API写法，Nuxt 3也支持直接在组件选项中监听$route：

<script>
export default {
  watch: {
    '$route'(to, from) {
      console.log('route change to', to)
      console.log('route change from', from)
    }
  }
}
</script>

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