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

Posted 2023-02-22

【中文标题】Vue Router - 使用 Vue 2 Composition API 获取路由参数

【英文标题】：Vue Router - Get route params using the 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 访问我的路由参数？

【参考方案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();