在 Vue 路由器中更改正文样式

我正在使用带有两个页面的 Vue 路由器：

 let routes = [
    {
        path: '/',
        component: require('./components/HomeView.vue')
    },
    {
        path: '/intro',
        component: require('./components/IntroView.vue')
    }
]

这很好用，除了我的每个组件都有不同的主体样式：

主视图.vue：

 <template>
    <p>This is the home page!</p>
</template>

<script>
    export default {

    }
</script>

<style>
    body {
        background: red;
    }
</style>

介绍视图.vue：

 <template>
    <div>
        <h1>Introduction</h1>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>
    body {
        background: pink;
    }
</style>

我的目标是让这两个页面具有不同的背景样式（最终在它们之间进行过渡）。 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 （我希望它更改为 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>

原文由 GluePear 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 407

watch: { $route: { handler (to, from) { const body = document.getElementsByTagName('body')[0]; if (from !== undefined) { body.classList.remove('page--' + from.name.toLowerCase()); } body.classList.add('page--' + to.name.toLowerCase()); }, immediate: true, } },

在 Vue 路由器中更改正文样式

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

Stack Overflow 翻译