Changing body styles in vue router

Question

I\'m using Vue router with two pages:

let routes = [
    {
        path: \'/\',
        component: require(\'./components/HomeView.vue\')
    },
    {
        pa         


        

Answer 1

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,
  }
},

Another fairly simple solution, add it to your base App.vue file. The to.name can be replaced with to.meta.class or similar for something more specific. This is a nice do it once and it works forever type solution though.