Nuxt2 - 监听路由变化

Question

我知道这个问题已经被问了几次，但是我不明白在Nuxt2中如何监听路由变化。

对我来说它不起作用。

我的代码是：

watch: {
    $route(to, from) {
      console.log('route change to', to)
      console.log('route change from', from)
    },
  },

最小可复现示例：

https://codesandbox.io/s/dreamy-feather-90gbjm

期望行为

在路由变化时显示控制台日志。

结果

没有任何反应。

- Dollique

---

可能是因为您只在特定页面观看它，因此当您进入或离开该页面时，它不会第一时间观看它。（也许 immediate: true 可以帮助解决这个问题）不过，最好将这种 watcher 放在中间件或包装布局中。 - kissu

Answer 1

你可以通过在渲染首页和关于页面的 layout 上添加 watcher 来解决这个问题。

| pages
  | index.vue
  | about.vue
| layouts
  | base.vue

在`layouts/base.vue`中。

<template>
  <Nuxt />
</template>

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

在 `index.vue` 和 `about.vue` 文件中。

<template>
  ... Many things here
</template>

<script>
export default {
  layout: 'base',
  ...
}
</script>

- Guille

---

或者使用 /layouts/default.vue，这样你甚至都不需要指定它。 - kissu

不错，这个可行。我一直在尝试在组件中设置观察器。如果你仔细想想，这是有道理的，因为路由只适用于整个页面，而不是组件本身。 - Dollique

Answer 2

使用Nuxt 3，您可以从vue-router中使用onBeforeRouteUpdate：

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

onBeforeRouteUpdate((newRoute) => {
    console.log(newRoute)
})
</script>

- KitKit