I want to use URLs in Vue.js to navigate between pages

I am developing an application using Spring Boot for the backend and Vue.js for the frontend.

I want to navigate to a specific page using the following URL:
localhost:8080/event_detail/:role/:objectId/:eventId.

Navigation works correctly when using a button, but when I type the URL directly into the browser, the backend processes the request, and the intended page is not displayed.

What I want to achieve is for the application to behave the same way when the URL is entered directly as it does when navigating via a button.

Here is my router.js configuration:

router.js { path: '/event_detail/:role/:objectId/:eventId', name: 'EventDetail', component: event_detail, props: true, }

Here is the backend controller:

@RestController @RequestMapping("/event_detail") public class EventDetailController {
@Autowired
private EventDetailService eventService;

@GetMapping("/{role}/{objectId}/{eventId}")
public ResponseEntity<Map<String, Object>> getEventDetail(
        @PathVariable String role,
        @PathVariable ObjectId objectId,
        @PathVariable String eventId) {
}
}

Here is the code for navigating via a button:

redirectToEventPage() {this.$router.push({ path: this.Url });} else {alert("B");},

This question was generated using automatic translation.