如何防止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路线时，有一些来自/employers路线的CSS样式正在您的/employers/google路线中重复使用。因此，当您重新加载http://localhost:8080/employers/google路线时，您无法从/employers获取导致CSS中断的样式。

我的建议是将常用样式移动到一个特定文件中，并将其导入主文件，如App.vue，以便无论重新加载哪个组件，它们都会被加载。