Vue Router - 使用 Vue 2 Composition API 获取路由参数

Question

我使用Vue 2 Composition API，并希望在我的方法中从 Vue Router 访问路由参数setup()。

如Vue Router 文档中所述：

因为我们无权访问 的this内部setup，所以我们无法直接访问this.$routeror this.$route。相反，我们使用该useRouter函数：

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  },
}

不幸的是，此方法在 Vue 2 的 Vue Router 中不可用。这里有哪些选项以及如何使用 Vue 2 Composition API 访问我的路由参数？

Answer 1

在 Vue 版本 <= 2.6 组合 api 中，您root在设置上下文中拥有引用根组件的属性，请尝试使用它而不是this：

export default {
  setup(props,context) {
    const router = context.root.$router;
    const route = context.root.$route;

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  },
}

Answer 2

从版本 3.6.0开始，useRoute（以及所有其他可组合项）可以从vue-router/composables