Nuxt - 观看路线变化

Question

我知道这个问题被问过几次了，但我不明白关于在 nuxt 中观察路由变化的事情。

它对我不起作用。

我的代码是：

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

最小可重现示例：

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

预期行为

显示路由更改的控制台日志。

结果

什么都没发生

Answer 1

您可以通过在呈现索引和关于页面的 layout 上添加观察者来解决此问题。

| 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>

Nuxt - 观看路线变化

Nuxt - watch route change

vue.js

vue-router

nuxt.js