Is there a way in VueJS to create dynamic backgrounds based on the Route? For instance, I have the followings routes:
const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/:col",
name: "collections",
component: () =>
import(
/* webpackChunkName: "collections" */ "../views/CollectionsView.vue"
),
children: [
{
path: "staked",
name: "staked",
component: () =>
import(/* webpackChunkName: "staked" */ "../views/StakedView.vue"),
},
{
path: "unstaked",
name: "unstaked",
component: () =>
import(
/* webpackChunkName: "unstaked" */ "../views/UnstakedView.vue"
),
},
],
},
];I would like to set a different background image for each of the dynamic routes under the named route "collections", so "/collection1/..." would display a different background image than "/collection2/.
Here is my template inside AppView.vue:
<template>
<div class="background">
<div
:style="{
backgroundImage: image,
}"
>
<TheAppHeader />
<div class="main m-auto">
<TheTitle />
<router-view />
</div>
</div>
</div>
</template>I don't know how I can grab that collection name from the route and use it to get the desired background image into "".
My background images are all in the /src/assets/ directory.
Any ideas? Thank you!
You can use watch property for this
watch: {
'$route.params'(currentParam) {
if (currentParam == '/collection1') {
this.image = <put your image here>
}
else if (currentParam == '/collection2') {
this.image = <put your another image here>
}
}
}
Please use to colsole current param to check your required/target values
You can pass the path to your background image as a prop to a route.
// In routes.js
const routes = [{
path: "/",
name: "home",
component: HomeView,
props: {
backgroundImage: './src/assets/route-backgrounds/home.jpg',
},
}]
// In component
props: [ "backgroundImage" ],
// In template
<div :style="{ backgroundImage: `url('${backgroundImage}')` }"></div>
Can use $route.params like this.
watch: {
'$route.params'(currentParam) {
this.image = `assets/images/${currentParam}.jpg`
// i.e. assets/images/collection1.jpg
}
}