I'm lazyloading all my routes, but the only way I've found to implement all my background-images the way I want them is with this method:
App.vue
<template>
<div id="app" v-bind:class="[
{ 'forside' : $route.path == '/' },
{ 'konferanse' : $route.path == '/konferanse' },
{ 'pizzeria' : $route.path == '/pizzeria-del-generale' },
[ { 'lobby' : $route.path == '/om-oss/bedriften' || $route.path == '/om-oss/jobb' || $route.path =='/om-oss/yrke' || $route.path == '/om-oss/kontakt' || $route.path == '/om-oss/personvern' || $route.path == '/om-oss/veien-hit' || $route.path == '/opplevelser/spill' || $route.path == '/opplevelser/aktiviteter' }],
{ 'selskap' : $route.path == '/selskap' || $route.path == '/catering' || $route.path == '/blogg' } ]">
<my-header></my-header>
<router-view />
<my-footer></my-footer>
</div>
</template>
I suspect this provides me with a pretty slow page load time. Google's page speed test gives me a score of 47 for mobile (80 for desktop).
Is there a way I can lazyload these background-images?