title: In vue.js, Can i change parent element's css only under current router?
body: <p>I want to change parent's style at the component.
  And I do not want change CSS at other components.
  Look at my code.</p>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;div class="page-content"&gt;
      &lt;router-view ref="routeview"&gt;&lt;/router-view&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>router/index.js</strong></p>
  
  <pre><code>  routes: [
      {   path: '/home',            name: 'Home',       component: HomeView     },
      {   path: '/heroes',      name: 'Heroes',     component: HeroesView   },
    ]
  </code></pre>
  
  <p><strong>HomeView</strong></p>
  
  <pre><code>&lt;style&gt;
  .page-content {
      background-color: red;
  }
  &lt;/style&gt;
  &lt;style scoped&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>If I put <code>.page-content</code> CSS in global CSS area like above, it changes HerosView's style too. That is not what I want.
  I want to change <code>.page-content</code> background under current HomeView page.</p>
  
  <p>Is it possible?</p>