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

【问题标题】：Vue Router - Get route params using the Vue 2 Composition APIVue Router - 使用 Vue 2 Composition API 获取路由参数
【发布时间】：2021-06-23 05:25:11
【问题描述】：

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

如Vue Router documentation中所述：

由于我们无法访问setup 内部的this，因此我们无法再直接访问this.$router 或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 路由器中不提供此方法。我在这里有哪些选项以及如何使用 Vue 2 组合 API 访问我的路由参数？

【问题讨论】：

标签： vue.js vuejs2 vue-router vuejs3 vue-composition-api

【解决方案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,
        },
      })
    }
  },
}

【讨论】：

【解决方案2】：

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

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

const route = useRoute();

【讨论】：