如何防止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，但它不起作用，最后，我尝试将路由器模式从历史更改为哈希模式。试试我的情况，效果很好。

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

Answer 2

我注意到您正在按需加载组件。

当您从/employers导航到/employers/google路线时，有一些来自/employers路线的CSS样式正在您的/employers/google路线中重复使用。所以当你重新加载http://localhost:8080/employers/googleroute，您无法从/employers获取样式，这会导致您的CSS中断。

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

Answer 3

问题不在于路由，而在于如何编写css。

>

如果多个组件将共享样式，则可以单独使用css文件。