In a decoupled web application, the Vue.js frontend manages UI navigation while the Java backend handles API endpoints. Effective routing requires coordination between these layers.

Frontend Routing with Vue Router

Install the Vue Router package into the Vue project:

npm install vue-router@4

Set up the router configuration in a dedicated file, such as src/router.js:

import { createRouter, createWebHistory } from 'vue-router';
import Dashboard from './views/Dashboard.vue';
import Profile from './views/Profile.vue';

const routeDefinitions = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  }
];

const routerInstance = createRouter({
  history: createWebHistory(),
  routes: routeDefinitions
});

export default routerInstance;

Backend Endpoint Handling with Spring Boot

Insure the Spring Boot project includes the necessary dependency in pom.xml:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

Create a controller class to define API routes. For example, a ProfileController.java:

package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ProfileController {
    
    @GetMapping("/api/profile")
    public String fetchProfileData() {
        return "Profile data from backend";
    }
}

Aligning Frontend and Backend Routes

The frontend Vue route /profile would typically correspond to a component that fetches data from the backend endpoint /api/profile. This separation keeps UI routing distinct from data API paths.

For instance, within the Vue Profile.vue component, an API call might be made:

<script>
export default {
  data() {
    return {
      userData: null
    };
  },
  async created() {
    const response = await fetch('/api/profile');
    this.userData = await response.text();
  }
};
</script>

Complete Integration Example

A practical setup involves distinct routing configurations for each layer.

Frontend Router (src/router.js):

import { createRouter, createWebHistory } from 'vue-router';
import Dashboard from './views/Dashboard.vue';
import Profile from './views/Profile.vue';
import Settings from './views/Settings.vue';

const appRoutes = [
  { path: '/', component: Dashboard },
  { path: '/user-profile', component: Profile },
  { path: '/app-settings', component: Settings }
];

const appRouter = createRouter({
  history: createWebHistory(),
  routes: appRoutes
});

export default appRouter;

Backend Controller (SettingsController.java):

package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class SettingsController {
    
    @GetMapping("/settings")
    public String getApplicationSettings() {
        return "{\"theme\": \"dark\"}";
    }
}

In this architecture, the Vue frontend manages navigation to /app-settings, and the corresponding component can retrieve data by calling the backend at /api/settings.