41
rated 0 times
[
45]
[
4]
/ answers: 1 / hits: 35932
/ 7 Years ago, wed, june 14, 2017, 12:00:00
I'm using Vue router with two pages:
let routes = [
{
path: '/',
component: require('./components/HomeView.vue')
},
{
path: '/intro',
component: require('./components/IntroView.vue')
}
]
This works fine, except that each of my components has different body styling:
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>
My goal is to have these two pages have different background styles (eventually with a transition between them). But at the moment when I go to the home route (with the red background), then click the intro route, the background colour stays red (I want it to change to pink).
Edit:
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>
More From » vue.js
