Vue-router: is it possible to pass params while redirecting programatically via a path?

Question

Essentially, I want to redirect to a dynamic URL, something like: /resource/:id, but I also want to pass some parameters at the same time. I don't want to go the query string route.

So, something like:

this.$router.push({path: 'resource/' + id, params: {
      test: "HELLO"
   }
});

The property gets passed when I have it like this (but it's not the right route)

this.$router.push({name: 'resource', params: {
      test: "HELLO"
   }
});

Is it possible to do what I want or do I need to start looking into VueEx?

What is your desired URL? domain.com/resource/100?test='HELLO'? Where 100 is the id — Matt Oestreich
– Matt Oestreich, Commented Apr 22, 2019 at 21:06
I don't want the querystring. I only want /resource/100 and the test would get passed behind the scenes. — jeffkolez
– jeffkolez, Commented Apr 22, 2019 at 21:11

Kees de Kooter · Accepted Answer · 2019-05-16 19:05:20Z

3

You can do it like this:

your router:

{
    path: '/resource/:id',
    name: 'route-name',
    component: Component,
    props: true,
},

and in your component you can get all parameters as props:

props: ['id', 'name', '...'],

if you want to call the route in a router-link you can do it like this:

<router-link tag="a" :to="{name: 'route-name', params: {id: 1, name: 'John', ...}}">

I hope it would help you.

edited May 16, 2019 at 19:05

Kees de Kooter

7,2135 gold badges42 silver badges47 bronze badges

answered Apr 22, 2019 at 20:35

Morteza Pouretemadi

6484 silver badges12 bronze badges

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

2 Comments

jeffkolez Over a year ago

I want to do it programatically though, not via a link (The button I'm having the user click needs to do an ajax call before redirecting).

Morteza Pouretemadi Over a year ago

I think it's not possible. but you can have some global computed variables. set them in you Ajax call and then call them in you destination component. If you want help doing that, let me know

jeffkolez · Accepted Answer · 2019-04-22 23:34:40Z

0

I went the VueX route and set up a store. Doesn't look like it's possible to do what I was thinking initially.

answered Apr 22, 2019 at 23:34

jeffkolez

6583 gold badges8 silver badges33 bronze badges

Collectives™ on Stack Overflow

Vue-router: is it possible to pass params while redirecting programatically via a path?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related