Vue 路由器 - 使用 Vue 2 组合获取路由参数 API

Question

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

如Vue Router documentation所述：

Because we don't have access to this inside of setup, we cannot directly access this.$router or this.$route anymore. Instead we use the useRouter function:

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 路由器中不可用。我在这里有哪些选择以及如何使用 Vue 2 组合访问我的路由参数API？

Answer 1

在 vue 2 组合中 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

软件包 vue2-helpers 有一些实用程序可以解决您的问题。

import { useRoute } from 'vue2-helpers/vue-router';

const route = useRoute();