gpt4 book ai didi

javascript - 在 vue 路由器中更改主体样式

转载 作者:可可西里 更新时间:2023-11-01 01:27:57 26 4
gpt4 key购买 nike

我正在使用 Vue router有两页:

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>

最佳答案

我让它与 lifecycle hook 一起工作beforeCreate和一个全局样式表。在 global.css :

body.home {
background: red;
}
body.intro {
background: pink;
}

<script>HomeView.vue :

export default {
beforeCreate: function() {
document.body.className = 'home';
}
}

IntroView.vue 类似.

关于javascript - 在 vue 路由器中更改主体样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44541872/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com