farm-fresh/src/router/index.js

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

const routes = [
    {
        path: '/',
        name: 'field',
        component: CropField,
        meta: {
            title: 'Field',
            background: '/assets/backgrounds/grass_summer.png'
        }
    },
    {
        path: '/shop',
        name: 'shop',
        component: ItemShop,
        meta: {
            title: 'Shop',
            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)
})

export default router