farm-fresh/src/router/index.js

import {createRouter, createWebHistory} from 'vue-router'
import FieldView from '@/components/CropField'
import ShopView from "@/components/ShopView";
import InventoryView from "@/components/InventoryView";

const routes = [
    {
        path: '/',
        name: 'field',
        component: FieldView,
        meta: {
            title: 'Field',
            background: '/assets/backgrounds/grass_summer.png'
        }
    },
    {
        path: '/shop',
        name: 'shop',
        component: ShopView,
        meta: {
            title: 'Shop',
            background: '/assets/backgrounds/planks.jpg',
            backgroundSize: '20%'
        }
    },
    {
        path: '/inventory',
        name: 'inventory',
        component: InventoryView,
        meta: {
            title: 'Inventory',
            background: '/assets/backgrounds/planks.jpg',
            backgroundSize: '20%'
        }
    },
    {
        path: '/barn',
        name: 'barn',
        component: ShopView,
        meta: {
            title: 'Barn',
            background: '/assets/backgrounds/planks.jpg',
            backgroundSize: '20%'
        }
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

router.beforeEach((route) => {
    window.setBodyBackground(route.meta.background, route.meta.backgroundSize)
    document.title = route.meta.title;
})

export default router