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

You can also do it directly in the router file using the afterEach hook:

mainRouter.afterEach((to) => {
    if (["dialogs", "snippets"].includes(to.name)) {
        document.body.style.backgroundColor = "#F7F7F7";
        // or document.body.classList.add(className);
    } else {
        document.body.style.backgroundColor = "#FFFFFF";
        // or document.body.classList.remove(className);
    }
});

afterEach hook documentation

to is a route object which contains the route name (if named), path, etc. Documentation for all the props