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

wr98u20j 于 2022-11-30 发布在 Vue.js

关注(0)|答案(3)|浏览(318)

我使用Vue 2 Composition API，并希望在我的setup()方法中从Vue路由器访问路由参数。
如Vue工艺路线文档所述：
因为我们不能访问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

来源：https://stackoverflow.com/questions/66815981/vue-router-get-route-params-using-the-vue-2-composition-api

3条答案

按热度按时间

at0kjp5o1#

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

赞(0）回复(0）举报 2022-11-30

hs1ihplo2#

从版本3.6.0开始，useRoute（以及所有其他可合成对象）可以从vue-router/composables导入

赞(0）回复(0）举报 2022-11-30

8oomwypt3#

包vue 2-helpers有一些实用程序可以解决你的问题。

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

const route = useRoute();

赞(0）回复(0）举报 2022-11-30

我来回答

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

3条答案

相关问题

热门标签

最新问答