¿Hay alguna forma en VueJS de crear fondos dinámicos basados en la Ruta? Por ejemplo, tengo las siguientes rutas:
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" ), }, ], }, ];Me gustaría establecer una imagen de fondo diferente para cada una de las rutas dinámicas bajo la ruta nombrada "colecciones", por lo que "/colección1/..." mostraría una imagen de fondo diferente a "/colección2/.
Aquí está mi plantilla dentro de AppView.vue:
<template> <div class="background"> <div :style="{ backgroundImage: image, }" > <TheAppHeader /> <div class="main m-auto"> <TheTitle /> <router-view /> </div> </div> </div> </template>No sé cómo puedo tomar ese nombre de colección de la ruta y usarlo para obtener la imagen de fondo deseada en "".
Mis imágenes de fondo están todas en el directorio /src/assets/.
¿Algunas ideas? ¡Gracias!
Puedes usar la propiedad del watch para esto
watch: { '$route.params'(currentParam) { if (currentParam == '/collection1') { this.image = <put your image here> } else if (currentParam == '/collection2') { this.image = <put your another image here> } } }Úselo para colsolear el parámetro actual para verificar sus valores requeridos/objetivo
Puede pasar la ruta a su imagen de fondo como apoyo a una ruta.
// 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>Puede usar $route.params como este.
watch: { '$route.params'(currentParam) { this.image = `assets/images/${currentParam}.jpg` // ie assets/images/collection1.jpg } }