CODEWITHSUNDEEP
vue.jsvue-routervue-cli-3
eneneharrison
eneneharrison

Reputation: 11

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

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

Upvotes: 1

Views: 2540

Answers (4)

bayomatthew
bayomatthew

Reputation: 1

Just add mode:"hash" after carrying out mode:"history", has shown below, and you are good to go

const router = new Router({ mode: "history", mode: "hash", routes: [] })

Upvotes: -2

Fikremariam Asmro
Fikremariam Asmro

Reputation: 7

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: []
})

Upvotes: 1

Arthur
Arthur

Reputation: 108

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.

Upvotes: 1

arora
arora

Reputation: 869

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.

Upvotes: 3

Related Questions