Как предотвратить потерю стилей дочерних маршрутов в Vue.js при обновлении страницы

Question

Моя маршрутизация для моего сайта работает нормально, но проблема возникает, когда я нажимаю кнопку обновления.

На базовом маршруте, например, http://localhost:8080/employers стиль страницы или компонента остается тем же, но когда я обновляю дочерний маршрут, например, http://localhost:8080/employers/google, весь стиль для этого компонента будет потерян.

Любая помощь по решению этой проблемы будет оценена

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

Проблема не в ваших маршрутах , а в том, как вы пишете свой CSS.

1. Я рекомендую использовать стиль с областью действия для стиля компонента (только этот компонентбудут использовать стили).

2. если несколько стилей будут совместно использовать стили, вы можете использовать файлы CSS отдельно.

Answer 2

Я заметил, что вы загружаете компоненты по требованию.

При переходе от маршрута /employers к /employers/google существуют некоторые стили CSS из маршрута /employers, которые повторно используются в вашем маршруте./employers/google маршрут.Поэтому, когда вы перезагружаете маршрут http://localhost:8080/employers/google, вы не можете получить стили из /employers, что приводит к разрыву вашего CSS.

Я предлагаю переместить общие стили в один конкретный файл и импортировать его в основной файл.файл типа App.vue, чтобы они загружались независимо от того, какой компонент был перезагружен.