Nuxt.js中组件监听路由参数变化的对应实现语法是什么？

Nuxt 底层基于 Vue Router 实现，你在 Vue 中使用的路由参数监听写法在 Nuxt 中完全可以直接复用，针对不同 Nuxt 版本和 API 风格，也可以参考以下对应实现：

选项式API #

和原生 Vue 写法完全一致，无需修改直接可用：

export default {
  watch: {
    "$route.params.index": function (val) {
      console.log(val)
    },
    // 监听查询参数同理
    // "$route.query.xxx": function(val) { console.log(val) }
  }
}

组合式API #

需要先安装@nuxtjs/composition-api插件，写法如下：

import { useRoute, watch } from '@nuxtjs/composition-api'

export default {
  setup() {
    const route = useRoute()
    watch(
      () => route.value.params.index,
      (newVal) => {
        console.log(newVal)
      }
    )
  }
}

选项式API #

和原生 Vue、Nuxt2 选项式写法完全通用，直接复用原有代码即可。

组合式API（官方默认推荐） #

<script setup>
const route = useRoute()

// 监听单个params参数
watch(() => route.params.index, (newVal) => {
  console.log(newVal)
})

// 监听整个params对象需开启深度监听
watch(
  () => route.params,
  (newParams) => {
    console.log(newParams.index)
  },
  { deep: true }
)

// 监听查询参数写法同理
// watch(() => route.query.xxx, (newVal) => console.log(newVal))
</script>

如果是配合useFetch/useAsyncData请求数据，想要路由参数变化时自动重新发起请求，可以直接配置watch选项：

const { data } = useFetch('/api/你的接口地址', {
  watch: [() => route.params.index]
})

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