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

Question

我正在使用Vue 2 Composition API，想要在setup()方法中访问来自Vue Router的路由参数。

根据Vue Router文档的描述：

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 Router中没有这种方法。那么我有哪些选择？如何使用Vue 2 Composition API访问我的路由参数？

- TheKeymaster

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,
        },
      })
    }
  },
}

- Boussadjra Brahim

---

context.root 对我来说是未定义的。我正在使用 Vue 2.7.14。 - Pablo

对我来说，context.root 的值是未定义的。我正在使用 Vue 2.7.14 版本。 - undefined

尝试使用useRouter和useRoute来获取当前的路由器和路由。请参考https://router.vuejs.org/guide/advanced/composition-api.html#vue-router-and-the-composition-api。 - Boussadjra Brahim

Answer 2

自从3.6.0版本起，可以从vue-router/composables导入useRoute（以及所有其他组合API）。

- camilo.forero

Answer 3

这个包vue2-helpers有一些工具可以解决你的问题。

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

const route = useRoute();

- Ambit Tsai

---

不确定是怎么做到的，但它可以工作。 - svenema