如何防止 Vue.js 中的子路由在页面刷新时丢失样式

Posted 2023-02-23

【中文标题】如何防止 Vue.js 中的子路由在页面刷新时丢失样式

【英文标题】：How to prevent child routes in Vue.js from losing styles when the page refreshes

【发布时间】：2019-09-10 12:51:16

【问题描述】：

我的网站路由工作正常，但当我点击刷新按钮时出现问题。

在基本路由（例如 http://localhost:8080/employers）上，页面或组件样式保持不变，但当我刷新子路由（例如 http://localhost:8080/employers/google）时，此组件的所有样式都将丢失。

任何有关如何解决此问题的帮助将不胜感激

从 'vue' 导入 Vue 从'vue-router'导入路由器 // 从 './store.js' 导入商店 Vue.use（路由器） 常量路由器 = 新路由器（ 模式：'历史'， 基础：process.env.BASE_URL， 路线：[ 小路： '/'， 组件：() => import('./views/Home.vue'), 孩子们： [ 小路： ””， 组件：() => import("./views/HomePage.vue"), , 路径：'/工作'， 名称：'工作'， 组件：() => import('./views/JobListings.vue') , 路径：'/job/:id', 名称：'工作'， 组件：() => import('./views/JobDetails.vue') , 路径：'/登录'， 名称：'登录'， 组件：() => import('./views/Login.vue') , 路径：'/注册'， 名称：'注册'， 组件：() => import('./views/Register.vue') , path: '/忘记密码', name: '忘记密码', 组件：() => import('./views/ForgotPassword.vue') , 路径：'/验证'， 名称：'验证'， 组件：() => import('./views/Verify.vue') , ], , 路径：'/雇主'， 组件：() => import('@/views/Employers.vue'), 孩子们： [ 小路： ''， 组件：() => import('./views/Employers/Profile.vue') , 路径：'个人资料'， 组件：() => import('./views/Employers/Profile.vue') , 路径：'发布'， 组件：() => import('./views/Employers/PostJob.vue') , 路径：'列表'， 组件：() => import('./views/Employers/Listings.vue') , 路径：'设置'， 组件：() => import('./views/Employers/Listings.vue') , 路径：“编辑简历”， 组件：() => import('./views/Employers/Listings.vue') , 路径：'closeaccount'， 组件：() => import('./views/Employers/Listings.vue') , ] , //求职者路线 路径：'/求职者'， 组件：() => import('@/views/Jobseekers/Home.vue'), 孩子们： [ 小路： ''， 组件：() => import('@/views/Jobseekers/Profile.vue') , 路径：'简历'， 组件：() => import('@/views/Jobseekers/Resume.vue') , 路径：'个人资料'， 组件：() => import('@/views/Jobseekers/Profile.vue') , 路径：'设置'， 组件：() => import('@/views/Jobseekers/Settings.vue') , 路径：'应用程序'， 组件：() => import('@/views/Jobseekers/Applications.vue') , 路径：'关闭'， 组件：() => import('@/views/Jobseekers/Close.vue') , ] , path: '/jobseeker/:page', 组件：() => import('@/views/Jobseekers/Profile.vue'), , 路径：'/search/:region/:keyword', 组件：() => import('./views/JobListings.vue') , // 没有找到路由 小路： '*'， 名称：'404'， 组件：() => import('./views/404.vue') ] ) 导出默认路由器

【问题讨论】：

更正错别字，转义的本地主机链接

他们是永远迷失了还是仅仅一瞬间？

【参考方案1】：

在执行mode:"history"后添加mode:"hash"，如下图，就可以了

常量路由器 = 新路由器（ 模式：“历史”， 模式：“哈希”， 路线：[] )

【参考方案2】：

我也是同样的问题，但我已经在全球范围内包含了 CSS，但它不起作用， 最后，我尝试将路由器模式从历史更改为散列它的工作。 在我的情况下尝试它工作正常。

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

【参考方案3】：

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

当您从 /employers 导航到 /employers/google 路由时，/employers 路由中的一些 CSS 样式在您的 /employers/google 路由中被重用。 因此，当您重新加载 http://localhost:8080/employers/google 路由时，您将无法从 /employers 获取样式，这会导致您的 CSS 中断。

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

【参考方案4】：

问题不在于您的路线，而在于您如何编写 CSS。

我建议在组件样式中使用范围样式（只有这个组件会使用这些样式）。

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