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

Question

我正在使用 Vue 2 Composition API并希望从我的 setup() 中的 Vue Router 访问路由参数方法。
如 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 Router 中不可用。我在这里有什么选择，我如何使用 Vue 2 Composition 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,
        },
      })
    }
  },
}