javascript - script - vue title attribute
Cambio de estilos de cuerpo en el enrutador vue (2)
Estoy usando el enrutador Vue con dos páginas:
let routes = [
{
path: ''/'',
component: require(''./components/HomeView.vue'')
},
{
path: ''/intro'',
component: require(''./components/IntroView.vue'')
}
]
Esto funciona bien, excepto que cada uno de mis componentes tiene diferentes estilos de cuerpo:
HomeView.vue:
<template>
<p>This is the home page!</p>
</template>
<script>
export default {
}
</script>
<style>
body {
background: red;
}
</style>
IntroView.vue:
<template>
<div>
<h1>Introduction</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
body {
background: pink;
}
</style>
Mi objetivo es que estas dos páginas tengan diferentes estilos de fondo (eventualmente con una transición entre ellas). Pero en el momento en que voy a la ruta de home (con el fondo red ), hago clic en la ruta de intro , el color de fondo permanece en red (quiero que cambie a pink ).
Editar: index.html:
<body>
<div id="app">
<router-link to="/" exact>Home</router-link>
<router-link to="/intro">Introduction</router-link>
<router-view></router-view>
</div>
<script src="/dist/build.js"></script>
</body>
Lo tengo trabajando con el gancho de ciclo de vida beforeCreate y una hoja de estilo global. En global.css :
body.home {
background: red;
}
body.intro {
background: pink;
}
En la sección <script> de HomeView.vue :
export default {
beforeCreate: function() {
document.body.className = ''home'';
}
}
Y similar en IntroView.vue .
Alternativamente puedes usar esto
Permite controlar las clases de cuerpo de su página con vue-router. Escribió esto cuando se enfrentó a un problema similar. También se refiere a Agregar una clase al cuerpo cuando se hace clic en el componente?