Question: I have some text that i am trying to change the styling on based on route name.I have set up 2 route names, ads and webs and have set up a watcher to watch the routes. If the route name is either ads or webs i want the text to have `color:white;background-color:orange`. But i am not sure how to do it.

```js
new Vue({
  el: '#app',
  data() {
    return {
      styleClass: null
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name == 'ads' || to.name == 'webs') {

      }
    }
  }
})
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

<div id="app">
  <span><h1>Hello!!!</h1></span>
</div>
```

Answer: 
I'd create a computed property to represent if the current route matches your criteria. 

```js
computed: {
  highlight () {
    return this.$route.matched.some(({ name }) => /^(ad|web)s$/.test(name))
  }
}

```

Then you can use that in a `class` binding expression.

```html
<span :class="{ highlight }">Text goes here</span>

```

and in your CSS

```css
.highlight {
  color: white;
  background-color: orange;
}

```

See <https://router.vuejs.org/api/#route-object-properties> for info on the `matched` property.
I guess you are missing the route vuejs plugin and name your application into the route name too. Here the full example. Hope you get what you want

```js
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo, name: 'ads' },
  { path: '/bar', component: Bar, name: 'nowebs' }
]

const router = new VueRouter({
   routes
}) 
const app = new Vue({
    router,
    data() {
        return {
           styleClass: null
        }
    },
    watch: {
        '$route' (to, from) {
           if (to.name == 'ads' || to.name == 'webs') {
               this.styleClass = "color:white;background-color:orange"
           } else {
               this.styleClass = ""
           }
       }
    }
}).$mount('#app')
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

<div id="app">
  <span><h1 :style="styleClass">Hello!!!</h1></span>

  <p>
       <router-link to="/foo">Go to Foo</router-link>
         <router-link to="/bar">Go to Bar</router-link>
   </p>
   <router-view></router-view>
</div>
```