Vue Router - Get route params using the Vue 2 Composition API

Question

Im using the Vue 2 Composition API and want to access the route parameters from the Vue Router in my setup() method.

As described in the 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,
        },
      })
    }
  },
}

Unfortunately this method is not available in the Vue Router for Vue 2. What are my options here and how can I access my route parameters using the Vue 2 Composition API?

Boussadjra Brahim · Accepted Answer · 2022-11-26 15:02:04Z

17

In Vue version<= 2.6 composition api you've the root property in the setup context that refers to the root component, try out to use it instead of 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,
        },
      })
    }
  },
}

edited Nov 26, 2022 at 15:02

answered Mar 26, 2021 at 11:43

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pablo Over a year ago

context.root came as undefined for me. I'm using Vue 2.7.14

Boussadjra Brahim Over a year ago

Try to use useRouter and useRoute to get the current router and route router.vuejs.org/guide/advanced/…

camilo.forero · Accepted Answer · 2022-09-12 21:49:00Z

14

Since version 3.6.0, useRoute (and all other composables) can be imported from vue-router/composables

answered Sep 12, 2022 at 21:49

camilo.forero

6207 silver badges11 bronze badges

Comments

Ambit Tsai · Accepted Answer · 2021-09-07 06:24:17Z

4

The package vue2-helpers has some utils that can resolve your problem.

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

const route = useRoute();

answered Sep 7, 2021 at 6:24

Ambit Tsai

411 bronze badge

1 Comment

svenema Over a year ago

Not sure how, but this works.

Collectives™ on Stack Overflow

Vue Router - Get route params using the Vue 2 Composition API

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related