vue 如何给每个页面添加一个全局的className

const router = new Router({   //对官方的脚手架做出部分修改
mode: 'hash', // ['history', 'hash']
linkActiveClass: 'active', // active class 名称
scrollBehavior(to, from, savedPosition) { // 后退页面时, 保留滚动位置
if (savedPosition) {
return savedPosition;
}
return { x: 0, y: 0 };
},
//路由
routes: [
{
path: '/solution',
component: Question,
}, {
path: '/solution/question',
name: 'question',
component: Question,
}
]
});

//这才是重点。。。。
router.beforeEach((to, from, next) => {
// html加class ==>给每个组件添加一个className ，min-height：100vh；有些手机是不兼容
//使用方法：html-路由的名称 组成的一个className：height:100%;width:100%; 全屏充满
//这个className的查看方法 控制台 Element 即可
const fromName = from.name || '';
const toName = to.name || '';
if (fromName) {
document.documentElement.classList.remove(`html-${fromName}`); //remove className
}
document.documentElement.classList.add(`html-${toName}`);  //add className
next();
})

export default router;

<style lang='scss' scoped>
.html-question { //充满当前整个屏幕
height:100%;
width:100%;
background-color:red;
}
</style&g
4000
t;

<style lang='scss' scoped>
.question { //不是全局的cssName
min-height:100vh; //不是所有的版本都兼容这个写法 。上面的方法万能的
width:100%;
background-color:red;
}
</style>