Я использую маршрутизатор Vue с двумя страницами:
let routes = [
{
path: '/',
component: require('./components/HomeView.vue')
},
{
path: '/intro',
component: require('./components/IntroView.vue')
}
]
Это прекрасно работает, за исключением того, что каждый из моих компонентов имеет разные стили кузова:
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>
Моя цель состоит в том, чтобы эти две страницы имели разные стили фона (в конечном итоге с переходом между ними). Но в тот момент, когда я иду на home
маршрут (с red
фоном), затем нажимаю на intro
маршрут, цвет фона остается red
(я хочу, чтобы он изменился на pink
).
Изменение: 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>