How to pass parameters on redirecting using Vue Router

Question

I have a sample Vue router here which handles going to the login first before accessing the form with a specific id:

router = new VueRouter({
             routes: [
                 {path: '/form/:id', redirect: '/login'},
                 {path: '/login', name: 'Login', component: Login}
             ]
         });

Is there a way that the login can still access the :id parameter passed since when I run http://localhost:8080/form/c101-101 it directly redirects to the Login component and when I try to log this.$route.params.id inside the login component it's undefined. Is there a way I can pass the :id on redirect?

fredrivett · Accepted Answer · 2022-06-15 19:36:36Z

23

You can use a function for dynamic redirecting, as per the Vue docs.

Here's an example taking a param (e.g. yourdomain.com/:yourParam) and redirecting to another URL, using the param (yourParam) as a query string (yourdomain.com/your/route?yourQueryString=:yourParam):

redirect: to => ({
  name: "your-named-route",
  query: { yourQueryString: to.params.yourParam },
}),

note: this syntax is using ES6.

edited Jun 15, 2022 at 19:36

answered Feb 3, 2020 at 16:22

fredrivett

6,7223 gold badges48 silver badges57 bronze badges

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

2 Comments

Fernando Torres Over a year ago

how to use it into a function when a click has been fired?

ShadowGames Over a year ago

Instead of forwarding the parameter as a query parameter (and I don't see that the OP asked for that) you can use redirect: to => ({ path: '/form/' + to.params.id }),

Sagar Kharche · Accepted Answer · 2018-04-20 05:28:58Z

8

You can make /:id as optional in login routes as follows:-

router = new VueRouter({
         routes: [
             {path: '/form/:id', redirect: '/login/:id'},
             {path: '/login/:id?', name: 'Login', component: Login}
         ]
     });

With above snippet of code you will get this.$route.params.id in login component.

answered Apr 20, 2018 at 5:28

Sagar Kharche

2,6812 gold badges27 silver badges35 bronze badges

3 Comments

gyohza Over a year ago

One caveat about this approach: if one needs to keep both /feature and /feature/:id as separate routes (which is an often used pattern for list and edit pages), using /feature/:id? would supersede /feature, so it wouldn't be an applicable solution in this scenario.

ShadowGames Over a year ago

This does not work anymore in 2023/24

Pawel Over a year ago

Yeah I think the workaround would be to use pass a function as render (dynamic routing) see router.vuejs.org/guide/essentials/…

Collectives™ on Stack Overflow

How to pass parameters on redirecting using Vue Router

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related