CODEWITHSUNDEEP
javascriptvuejs2
ST80
ST80

Reputation: 3903

Vue How to match a query route

In my vuejs-application I have a route that looks like this:

myapp.com/pages/verify?query=something123

but in my router.js I cannot figure out to match this route, so I can render a specific view. So I thought maybe something like this?:

path: "/pages/verify/:query"

Can someone help me out?

Upvotes: 1

Views: 1974

Answers (2)

mix3d
mix3d

Reputation: 4333

One thing you can do to get the query param passed into your component as a prop: set a function for the props object for that route definition. You can read more about "function mode" on the docs website.

[
    {
        path: '/pages/verify',
        name: 'verify',
        component: MyVerifyPageComponent,
        props: route => ({
            query: route.query,
        }),
    },
]

I should note, however, that since the query object is a map of every query key-value pair, if you use ?query=sometext, you would need to access it by route.query.query.

In your original example, however, you're setting a dynamic route path, (like a wildcard), that would match things like myapp.com/pages/verify/pageid-123 and even myapp.com/pages/verify/the/entire/string/past/verify. See https://router.vuejs.org/guide/essentials/dynamic-matching.html#dynamic-route-matching

Upvotes: 0

Dan
Dan

Reputation: 3584

If you want to get a parameter from the URL you cannot do it using the router.

The path in your router should be simply /pages/verify then in your component you can get the URL parameters using the $route object.

For example if your URL is http://myapp.com/pages/verify?query=something123&param2=abc then you can get those parameter (within a component) as per below:

  • this.$route.query.query
  • this.$route.query.param2

VUE documentation: https://router.vuejs.org/api/#route-object-properties

Upvotes: 1

Related Questions