Vue.js 组合式 API | 未监听 Vue 路由参数

在本文中，我们将介绍Vue.js 组合式 API以及解决Vue路由参数未被监听的问题。

Vue.js 组合式 API

Vue.js 组合式 API是Vue 3.0中引入的一种新的API风格，它使开发者能够更灵活地组织和重用组件逻辑。它解决了以往在使用Vue.js开发大型应用时可能遇到的一些问题，例如逻辑复用、逻辑代码的组织等。使用组合式 API，我们可以将相关的逻辑集中在一个函数中，使得代码更加清晰、易于维护。

Vue 路由参数未被监听的问题

在Vue.js中，我们可以使用Vue Router来进行路由管理。当我们在路由中使用参数时，通常希望能够根据参数的变化来触发相应的逻辑。然而，在某些情况下，我们可能会发现Vue路由参数并未被正确地监听，导致参数的变化不会引起组件的重新渲染。

例如，我们在一个组件中定义了一个计算属性，该计算属性依赖于路由参数。我们期望当路由参数发生变化时，计算属性会重新计算，从而触发组件的重新渲染。但实际上，我们会发现计算属性并不会随着路由参数的变化而重新计算。

这是因为Vue.js默认的响应式系统并不会自动地监听路由参数的变化。Vue.js的响应式系统依赖于对象的属性来进行依赖跟踪，当属性发生变化时，相应的依赖会被重新计算。然而，对于路由参数来说，并没有属性可以被直接访问，因此默认情况下不会触发依赖的更新。

解决方案

为了解决Vue路由参数未被监听的问题，我们可以借助Vue.js组合式 API中的watch函数来手动监听路由参数的变化。

首先，我们需要通过Vue Router的useRoute函数来获取当前的路由对象，该对象包含了当前路由的参数信息。然后，我们可以在组件中使用watch函数来监听路由参数的变化。

import { useRoute, watch } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    watch(() => route.params, (newParams, oldParams) => {
      // 在这里可以触发相应的逻辑，例如重新计算计算属性等
    });

    // 组件的其他逻辑

    return {};
  }
}

通过上述代码，我们可以确保当路由参数发生变化时，相关的逻辑会被触发。这样，我们就解决了Vue路由参数未被监听的问题。