私は使用していますVueルーター2ページあります:
let routes = [
{
path: '/',
component: require('./components/HomeView.vue')
},
{
path: '/intro',
component: require('./components/IntroView.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>
私の目標は、これら 2 つのページに異なる背景スタイルを設定することです (最終的には、ページ間のトランジションを設定します)。しかし、現時点では、homeルート (背景ありred) に移動してルートをクリックするとintro、背景色はそのままですred(背景色を変更したいのですpink)。
編集：インデックス.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>
ベストアンサー1
私はそれを使ってライフサイクルフック beforeCreateおよびグローバル スタイルシートglobal.css。
body.home {
background: red;
}
body.intro {
background: pink;
}
<script>のセクションではHomeView.vue：
export default {
beforeCreate: function() {
document.body.className = 'home';
}
}
そして、 も同様ですIntroView.vue。