VueJS: How to use routing in an Multi Page App to send url query params?

Question

I'm a bit new to VueJS, I am using the MPA approach in VueJS to create an App with multiple pages (using this answer) and I want to have a query parameter in the url that navigates to the signup page from the pricing page like "localhost:8080/signup?bundle=standard"

this is my pages structure:

(image)

I used vue router and router link to do this, but I don't know where to put the router view as in the docs they only use it in a single page application.

How can I achieve this? How can I get the query params in a MPA app structure?

Answer 1

There are couple of ways for the redirection with parameter in vue.js you can simply make redirection from any method as follows:

setTimeout(() => {
              return  this.$router.push({name: 'Your_Router_Name_Hear', params: { bundle: 'standard' }})
            }, 100);

Another way is redirection from your template with parameters:

<router-link:to="{ name: 'Your_Router_Name_Hear', params: { bundle: 'standard' }}" class="button" > <i class="fa fa-edit"></i> Edit </router-link>