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?

Answer 1

For those still coming through to this, 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.

Answer 2

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.