title: Changing body styles in vue router
body: <p>I'm using <a href="https://github.com/vuejs/vue-router" rel="noreferrer">Vue router</a> with two pages:</p>
  
  <pre><code>let routes = [
      {
          path: '/',
          component: require('./components/HomeView.vue')
      },
      {
          path: '/intro',
          component: require('./components/IntroView.vue')
      }
  ]
  </code></pre>
  
  <p>This works fine, except that each of my components has different body styling:</p>
  
  <p><strong>HomeView.vue:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;p&gt;This is the home page!&lt;/p&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
  
      }
  &lt;/script&gt;
  
  &lt;style&gt;
      body {
          background: red;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>IntroView.vue:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Introduction&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
  
      }
  &lt;/script&gt;
  
  &lt;style&gt;
      body {
          background: pink;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>My goal is to have these two pages have different background styles (eventually with a transition between them). But at the moment when I go to the <code>home</code> route (with the <code>red</code> background), then click the <code>intro</code> route, the background colour stays <code>red</code> (I want it to change to <code>pink</code>).</p>
  
  <p>Edit: 
  <strong>index.html:</strong></p>
  
  <pre><code>  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;router-link to="/" exact&gt;Home&lt;/router-link&gt;
          &lt;router-link to="/intro"&gt;Introduction&lt;/router-link&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
      &lt;script src="/dist/build.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  </code></pre>