How to prevent child routes in Vue.js from losing styles when the page refreshes

Question

My routing for my site works fine but the problem arises when I hit the refresh button.

On a base route for example http://localhost:8080/employers the page or component style remains the same but when I refresh a child route for example http://localhost:8080/employers/google all the style for this component will be lost.

Any help on how to resolve this problem will be appreciated

import Vue from 'vue'
import Router from 'vue-router' 
// import store from './store.js'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [        
        {
            path: '/',
            component: () => import('./views/Home.vue'),
            children: [
                {
                    path: "",
                    component: () => import("./views/HomePage.vue"),
                },
                {
                    path: '/jobs',
                    name: 'jobs',
                    component: () => import('./views/JobListings.vue')
                },
                {
                    path: '/job/:id',
                    name: 'job',
                    component: () => import('./views/JobDetails.vue')
                },
                {
                    path: '/login',
                    name: 'login',
                    component: () => import('./views/Login.vue')
                },
                {
                    path: '/register',
                    name: 'register',
                    component: () => import('./views/Register.vue')
                },
                {
                    path: '/forgotpassword',
                    name: 'forgotpassword',
                    component: () => import('./views/ForgotPassword.vue')
                },
                {
                    path: '/verify',
                    name: 'verify',
                    component: () => import('./views/Verify.vue')
                }, 
            ],
        },


        {
            path: '/employer',
            component: () => import('@/views/Employers.vue'),
            children: [
                {
                    path: '', 
                    component: () => import('./views/Employers/Profile.vue')                    
                },
                {
                    path: 'profile', 
                    component: () => import('./views/Employers/Profile.vue')
                },
                {
                    path: 'post',
                    component: () => import('./views/Employers/PostJob.vue')
                },
                {
                    path: 'listings', 
                    component: () => import('./views/Employers/Listings.vue')
                }, 
                {
                    path: 'settings', 
                    component: () => import('./views/Employers/Listings.vue')
                },
                {
                    path: 'editresume', 
                    component: () => import('./views/Employers/Listings.vue')
                },
                {
                    path: 'closeaccount', 
                    component: () => import('./views/Employers/Listings.vue')
                },
            ]
        },

        // jobseekers route
        {
            path: '/jobseeker', 
            component: () => import('@/views/Jobseekers/Home.vue'),
            children: [
                {
                    path: '', 
                    component: () => import('@/views/Jobseekers/Profile.vue')
                },
                {
                    path: 'resume', 
                    component: () => import('@/views/Jobseekers/Resume.vue')
                },
                {
                    path: 'profile', 
                    component: () => import('@/views/Jobseekers/Profile.vue')
                },
                {
                    path: 'settings', 
                    component: () => import('@/views/Jobseekers/Settings.vue')
                },
                {
                    path: 'applications', 
                    component: () => import('@/views/Jobseekers/Applications.vue')
                },                
                {
                    path: 'close', 
                    component: () => import('@/views/Jobseekers/Close.vue')
                },
            ]
        },

        {
            path: '/jobseeker/:page',
            component: () => import('@/views/Jobseekers/Profile.vue'),
        },

        {
            path: '/search/:region/:keyword',
            component: () => import('./views/JobListings.vue')
        },

        // not found route
        {
            path: '*',
            name: '404',
            component: () => import('./views/404.vue')
        }
    ]
})

export default router

Answer 1

The problem is not with your routes, but how you write your css.

1. I recommend using a scoped style for in component styling (only this component will use the styles).

2. if more than one components are going to share styling, you can use css files separately.

Answer 2

I noticed that you are loading the components on-demand.

When you navigate from /employers to /employers/google route, there are some CSS styles from /employers route that are being reused in your /employers/google route. So when you reload http://localhost:8080/employers/google route, you are unable to obtain the styles from /employers which causes your CSS to break.

My suggestion is to move common styles into one particular file and import it into the main file like App.vue so that they are loaded no matter which component is reloaded.

Answer 3

I'm also the same issue but I already include the CSS globally but it doesn't work, finally, I try to change the router mode from history to hash it work. Try in my case it works fine.

const router = new Router({
  mode: "hash",
  base: process.env.BASE_URL,
  routes: []
})