John Davidson

Message:

I use Laravel in combination with Vue. I have a path to the main web application named '/app/main'. This loads a specific vue component 'main.vue'.

A functionality of the page is that an email with a summary with information gets sent to a customer. I want this email to have a link to the page, but with a specific ID for this order.

So a link like http://nameofdomain/app/main/100000 should open the default page http://nameofdomain/app/main, where I would catch the 100000 somewhere as a passed parameter, so that I can handle showing that specific ID.

At first I thought I had to adjust the laravel pathing and use dynamic parameters, but this seems wrong, as I ignore the whole vue part, which is my landing page. Then I looked into something similar for Vue, where you add a dynamic parameter like:

path: '/app/main/:id',

But this does not work. It doesn't see http://nameofdomain/app/main/100000 as a valid page (404 error).

So how can I provide my customers with a link containing an ID, so that when they follow the link, they are redirected to my Laravel/Vue page and it only shows the ID for that order (by passing it in the URL)?

Thanks in advance.

---

My Answer:
To achieve this functionality, you can use Vue Router to handle dynamic parameters in your URL. Here's how you can set it up:

1. Define a dynamic route in your Vue Router configuration:

javascript
const routes = [
{
path: '/app/main/:id',
component: MainComponent
}
];


2. In your MainComponent, you can access the ID parameter using `this.$route.params.id`:

javascript
export default {
mounted() {
const orderId = this.$route.params.id;
// Use orderId to fetch and display order information
}
}


3. When generating the link in your email template, make sure to include the ID parameter:

html
View Order


With this setup, when a customer clicks on the link in the email, they will be redirected to the '/app/main' page with the specific ID parameter. Vue Router will then load the MainComponent and you can access the ID parameter to display the order information.