在 vue router 中更改 body 样式 [英] Changing body styles in vue router
本文介绍了在 vue router 中更改 body 样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用带有两个页面的 Vue 路由器:
让路线= [{小路: '/'，组件:需要('./components/HomeView.vue')},{路径:'/介绍'，组件:需要('./components/IntroView.vue')}]这很好用，只是我的每个组件都有不同的主体样式:
HomeView.vue:
<p>这是主页！</p><脚本>导出默认{}<风格>身体 {背景:红色；}</风格>IntroView.vue:
<div><h1>简介</h1><脚本>导出默认{}<风格>身体 {背景:粉红色；}</风格>
我的目标是让这两个页面具有不同的背景样式(最终在它们之间进行过渡).但是在我去home路线(带有red背景)的那一刻，然后点击intro路线，背景颜色保持red(我希望它变成pink).
index.html:
<div id="应用程序"><router-link to="/"精确>主页</router-link><router-link to="/intro">介绍</router-link><路由器视图></路由器视图><script src="/dist/build.js"></script>
解决方案
我使用 生命周期钩子 beforeCreate 和一个全局样式表.在 global.css 中:
body.home {背景:红色；}body.intro {背景:粉红色；}在HomeView.vue的
