全局变量，场景：有些对象需要在某些组件中共享使用

main.js

new Vue({
  data(){
    return{
      loading:true
    }
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app')

a.vue

created(){
   console.log(this.$root.loading) //获取loading的值
}

b.vue

created(){
   this.$root.loading = false; //设置loading的属性
}

动态给body添加class

方法1：使用 document.body.classList

mounted () {
  document.body.classList.add('bg-light')
},
destroyed () {
  document.body.classList.remove('bg-light')
}

上面的代码会在组件创建时动态给body添加bg-lightclass，组件销毁时移除class

如果需要添加多个class，可以以逗号分隔

mounted () {
  document.body.classList.add('bg-light', 'login')
},
destroyed () {
  document.body.classList.remove('bg-light', 'login')
},

方法2：

使用包 vue-body-class

这个需要在配合vue-router 3.x使用

{
  path: '/login',
  name: 'login',
  component: Login,
  meta: { bodyClass: 'bg-light' }
}

参考

https://renatello.com/vue-js-body-class/